目录
一、搭建项目
二、常用的Composition API
1.ref函数(实现响应式)
2.reactive函数
3.vue2和vue3响应式的区别
4. setup参数
5.计算属性和监视
6.vue3生命周期
7.自定义hook
8.toRef和toRefs
9.其他组合式api
10.新的组件
npm init vite-app
进入项目
npm i
npm run dev
·接受的数据可以是基本数据,也可以是对象类型
·基本数据类型靠Object.defineProperty()的get和set实现
·对象类型的数据内部求助了Vue3中的一个新函数——reactive函数
·作用:定义一个对象类型的响应式数据
·返回一个代理对象(proxy的实例对象)
·reactive定义的响应式数据是深层次的
·ref和reactive的区别:
从定义数据角度对比
ref:定义基本类型数据
reactive:定义对象或数组类型
从原理角度对比:
ref使用Object.defineProperty()的get和set实现响应式(数据劫持)
reactive使用proxy来实现数据劫持,并通过Relect操作源对象内部的数据
·vue2的响应式:
对象类型:通过Object.defineProperty()对属性的读取、修改进行拦截(数据劫持)
数组类型:通过重写更新数组的一系列方法来实现拦截。(对数据的变更方法进行包裹)
·存在问题:
新增属性、删除属性,界面不会更新
解决方法:
新增:this.$set(object,property,value)/Vue.set(object,property,value)
删除:this.$delete(object,property)/Vue.delete(object,property)
·vue3的响应式:
通过proxy代理:拦截对象中任意属性的变化,包括:属性值的读写,添加,删除等
//vue3响应式
const p=new Proxy(person,{
//有人读取p的某个属性时调用
get(target,propName){
return Reflect.target[propName]
},
//有人修改p的某个属性或者增加某个属性时使用
set(target,propName,value){
Reflect.set(target,propName,value)
},
deleteProperty(target,propName){
return Reflect.deleteProperty(target,propName)
}
})
通过reflect反射(有Object的一些功能属性):对原对象的属性进行操作
Reflect.set(ocj,'a',11)
Reflect.deleteProperty(obj,'a')
Reflect.get(obj,'a')
Object不捕获错误,单线程出现错误会报错
setup有两个参数,props,context
props是传递给该组件的数据,context是执行上下文
context.attrs表示的是没有接收的props值,相当于vue2的$attrs
context.emit表示分发自定义事件的函数,相当于this.$emits
context.slots:表示收到的插槽内容,相当于this.$slots