Vue3.0新特性以及使用经验指南

setup 是 Vue3.x 新增的一个选项， 他是组件内使用 Composition API的入口。

setup 执行时机

我在学习过程中看到很多文章都说 setup 是在 beforeCreate和created之间， 这个结论是错误的。实践是检验真理的唯一标准， 于是自己去检验了一下：

export default defineComponent({  

  beforeCreate() {  

    console.log("----beforeCreate----");  

  },  

  created() {  

    console.log("----created----");  

  },  

  setup() {  

    console.log("----setup----");  

  },  

}); 

setup 执行时机是在 beforeCreate 之前执行，详细的可以看后面生命周期讲解。

setup 参数

使用setup时，它接受两个参数：

 props: 组件传入的属性

 context

setup 中接受的props是响应式的， 当传入新的 props 时，会及时被更新。由于是响应式的， 所以不可以使用 ES6 解构，解构会消除它的响应式。错误代码示例， 这段代码会让 props 不再支持响应式：

// demo.vue  

export default defineComponent ({  

    setup(props, context) {  

        const { name } = props  

        console.log(name)  

    },  

}) 

那在开发中我们想要使用解构，还能保持props的响应式，有没有办法解决呢？大家可以思考一下，在后面toRefs学习的地方为大家解答。接下来我们来说一下setup接受的第二个参数context，我们前面说了setup中不能访问 Vue2 中最常用的this对象，所以context中就提供了this中最常用的三个属性：attrs、slot 和emit，分别对应 Vue2.x 中的 $attr属性、slot插槽 和$emit发射事件。并且这几个属性都是自动同步最新的值，所以我们每次使用拿到的都是最新值。

在 vue2.x 中， 定义数据都是在data中， 但是 Vue3.x 可以使用reactive和ref来进行数据定义。那么ref和reactive他们有什么区别呢？分别什么时候使用呢？说到这里，我又不得不提一下，看到很多网上不少文章说 (reactive用于处理对象的双向绑定，ref则处理 js 基础类型的双向绑定)。我其实不太赞同这样的说法，这样很容易初学者认为ref就能处理 js 基本类型， 比如ref也是可以定义对象的双向绑定的啊， 上段代码：

setup() {  

   const obj = ref({count:1, name:"张三"})  

   setTimeout(() =>{  

       objobj.value.count = obj.value.count + 1  

       obj.value.name = "李四"  

   }, 1000)  

   return{  

       obj  

   }  

（编辑：ASP站长网）