站长网 资讯 Vue3.0新特性以及使用经验指南

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

setup 是 Vue3.x 新增的一个选项, 他是组件内使用 Composition API的入口。 setup 执行时机 我在学习过程中看到很多文章都说 setup 是在 beforeCreate和created之间, 这个结论是错误的。实践是检验真理的唯一标准, 于是自己去检验了一下: exportdefaul

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发射事件。并且这几个属性都是自动同步最新的值,所以我们每次使用拿到的都是最新值。

reactive、ref 与 toRefs

在 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  

   }  

本文来自网络,不代表站长网立场,转载请注明出处:https://www.tzzz.com.cn/html/biancheng/zx/2021/0528/7263.html

作者: dawei

【声明】:站长网内容转载自互联网,其相关言论仅代表作者个人观点绝非权威,不代表本站立场。如您发现内容存在版权问题,请提交相关链接至邮箱:bqsm@foxmail.com,我们将及时予以处理。
联系我们

联系我们

0577-28828765

在线咨询: QQ交谈

邮箱: xwei067@foxmail.com

工作时间:周一至周五,9:00-17:30,节假日休息

返回顶部