官方文档（ 中文版 ）：https://vue3js.cn/docs/zh/
创建一个Vue3.0的项目
1、npm init vite-app vue3.0 2、cd vue3.0 3、npm install 4、npm run dev
image
此时，项目已经创建成功！！！！
接下来，我们先来体验一下Vue3.0的新东西
❤️ Object.defineProperty => Proxy
重构了虚拟 DOMOptionApi => Composition API
**1、setup() ** beforeCreate 、created 之前执行
setup() 函数是 vue3 中，专门为组件提供的新属性。它为我们使用 vue3 的 Composition API 新特性提供了统一的入口, vue3取消了beforeCreate 、created两个钩子，统一用setup代替, 该函数相当于一个生命周期函数，vue中过去的data，methods，watch，computed等全部都用对应的新增api写在setup()函数中2、ref() 声明单一基础数据类型 返回值是响应式对象
创建一个响应式的数据对象，ref() 函数调用的返回值是一个对象，这个对象上只包含一个 value 属性, 只在setup函数内部访问ref函数需要加**.value****3、reactive() ** 声明单一对象 （注意：解构会破坏代理proxy即双向绑定）
reactive() 函数接收一个普通对象，返回一个响应式的数据对象, 想要使用创建的响应式数据也很简单，创建出来之后，在setup中return出去，直接在template中调用即可; 在reactive（）函数中访问ref（）函数创建的对象不用**.value**4、isRef() 判断是否是通过ref（）函数创建出来的对象
5、toRefs() 从组合函数返回反应对象
toRefs() 函数可以将 reactive() 创建出来的响应式对象，转换为普通的对象，只不过，这个对象上的每个属性节点，都是 ref() 类型的响应式数据6、computed() 计算属性 可创建只读，和可读可写两种
1) 只读 let fullName = computed(() => msg.value + '~' + name) 2）可读可写 let fullName2 = computed({ get: () => number.value + state.step, set: (v) => number.value = v })7、watch()
watch 函数用来侦听特定的数据源，并在回调函数中执行副作用。默认情况是懒执行的，也就是说仅在侦听的源数据变更时才执行回调。 1） 监听 reactive（ ）声明的数据 单数据监听： watch( ( )=> reactiveV.name, (n, o)=>{ }) 多数据监听： watch([( )=> reactive.name, ( )=> reactive.sex], ([name, sex], [oldName, oldSex])=> { }) 2) 监听 ref（ ）声明的数据 单数据监听： watch(age,(n, o)=>{ }) 多数据监听： watch([age, weight], ([newAge, newWeight], [oldAge, oldWeight])=> { }) 3）取消监听 const stop = watch(age,(n, o)=>{ }) setTimeout(() => { stop() }, 1000) // 一秒后取消对age的监听8、LifeCycle Hooks(新的生命周期)
onBeforeMount(() => { console.log('onBeforeMount') }) onMounted(() => { console.log('onMounted') }) onBeforeUpdate(() => { console.log('onBeforeUpdate') }) onUpdated(() => { console.log('onUpdated') }) onBeforeUnmount(() => { console.log('onBeforeUnmount') }) onUnmounted(() => { console.log('onUnmounted') })9、Template refs 通过refs 来回去真实dom元素
<h3 ref="h3">hello</h3> 想要得到h3的dom 在2.x中 this.$refs.h3 在3.0中如下： 1）在setUp函数中声明 let h3 = ref(null)，并return出去h3 2）在onMounted（）函数中打印 h3.value你会得到（*<h3 data-v-c5362648="">hello</h3*>）10、global Properties vue3.0 的全局配置
Vue 2.x 通过 Vue.prototype扩展 vue3.0 通过app.config.globalProperties.$api = 'http://www.baidu.com' 在setUp函数中通过 const { ctx } = getCurrentInstance() ctx.$api ( http://www.baidu.com )11、Suspense
异步组件在默认情况下是可挂起的。这意味着如果它在父链中有一个 <Suspense>，它将被视为该 <Suspense> 的异步依赖。在这种情况下，加载状态将由 <Suspense> 控制，组件自身的加载、错误、延迟和超时选项将被忽略。异步组件可以选择退出 Suspense 控制，并通过在其选项中指定 suspensable:false，让组件始终控制自己的加载状态。
🆕：1、Vue3.0template可以有多个根结点
2、创建组件需要用defineComponent包裹。
看看Vuex的使用
在setup（）函数中使用store中的state，commits，actions 首先，获取ctx const { ctx } = getCurrentInstance() 此时ctx.$store就是我们想要的store ，OK，想咋用就咋用了
image
作者：Nicholas_liang
链接：https://www.jianshu.com/p/9e78d2d6aa34
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
