组合式API
组合式API个人觉得vue3.0最大亮点就是setup,写起来和vue2.0感觉完全不同,现在来看看吧:1.setup ,创建组件实例,然后初始化props,紧接着就调用setup函数。 从生命周期的角度来看,它会在beforeCreate之前执行。也就是创建组件先执行setup、beforeCreate、create,由于不能在setup函数中使用data、methods,为了避免使用Vue出错
组合式API
个人觉得vue3.0最大亮点就是setup,写起来和vue2.0感觉完全不同,现在来看看吧:
1.setup ,创建组件实例,然后初始化props,紧接着就调用setup函数。 从生命周期的角度来看,它会在beforeCreate之前执行。也就是创建组件先执行setup、beforeCreate、create,由于不能在setup函数中使用data、methods,为了避免使用Vue出错,所以把setup函数中this修改为了undefined,其中包含props与context,props: 用来接收 props 数据,context 用来定义上下文, 上下文对象中包含了一些有用的属性,这些属性在 vue 2.x 中需要通过 this 才能访问到, 在 setup() 函数中无法访问到 this,是个 undefined,setup中还需要返回值return。
2.Reactive,该方法接收一个参数{}创建一个响应式对象。跟Vue2.x的Vue.observable一样。如果该参数不是对象的话,也可以渲染到模板上,但不是响应式的数据。
3.toRefs,toRefs() 函数可以将 reactive() 创建出来的响应式对象,转换为普通的对象,只不过,这个对象上的每个属性节点,都是 ref() 类型的响应式数据。
4.Ref,该方法接收一个参数,可以是单个值,也可以是一个对象,并且都是响应式的数据。当传入一个对象时{},内部将调用reactive方法进行转换为响应式数据。返回值里面带有.value属性取值,当使用模板渲染的时候可省去.value。
5.isRef,isRef() 用来判断某个值是否为 ref() 创建出来的对象;
6.Computed,该方法可以传入一个函数,默认该函数就是getter,不管getter返回值为一个ref响应式数据还是一个普通变量,数据都是只读不能改变;
7.Readonly,该方法接收传入一个对象,默认是只读功能,是深层对象只读,不管嵌套多少层的属性都是只读状态。
8.WatchEffect,该方法接收一个函数并且立即执行,并当该函数里的变量变更时,重新执行该函数。该方法无法获取到原值,只能是改变之后的值,如果需要取消监听则要执行watchEffect的返回值;
9.Watch,watch等同于Vue2.x中的this.$watch,watch需要监听特定数据,默认情况是懒执行,也就是只有当数据发生变化时才执行第二个参数函数,对比WatchEffect,watch为懒执行函;更明确哪些状态改变触发监听器;可以监听获取到变化前后的值。
更多推荐
所有评论(0)