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  

   }  

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!