vite
创建工程
npm init vite-app 项目名
进入工程目录
cd 项目名
安装依赖
npm install
运行
npm run dev
setup
理解 vue3.0中的一个新配置项,值为一个函数
setup是所有Composition API(组合API)的表演舞台
组件中所用到的 数据 方法等等 均要配置在setup中
setup函数的两种返回值
若返回一个对象 则对象中的属性 方法在模板中均可以直接使用 (重点关注)
若返回一个渲染函数 则可以自定义渲染内容
注意点
尽量不要与vue2.x配置混用
vue2.x配置(data,methods,computed..)中可以访问到setup中的属性 方法
但在setup中不能访问到vue2.x配置(data,methods,computed...)
如果有重名 setup优先
setup不能是一个async函数 因为返回值不再是return的对象 而是promise 模板看不到return对象中的属性
ref 函数
作用 定义一个响应式的数据
语法 const xxx=ref(initValue)
创建一个包含响应式数据的引用对象(reference对象 简称ref对象)
js中操作数据 xxx.value
模板中读取数据 不需要.value 直接<div>{{xxx}}</div>
备注
接受的数据可以是 基本类型 也可以是对象类型
基本类型的数据 响应式依然是靠object.defineProperty()的get和set完成的
对象类型的数据 内部求助了Vue3.0中的一个新函数--reactive函数
reactive 函数
作用 定义一个对象类型的响应式数据(基本类型不要用它 要用ref函数)
语法 const 代理对象=reactive(源对象)接收一个对象(或数组),返回一个代理对象(proxy的实例对象 简称proxy对象)
reactive定义的响应式数据是深层次的
内部给予ES6的Proxy实现 通过代理对象操作源对象内部数据进行操作
vue3 中的响应式原理
实现原理
对象类型 通过object.defineProperty()对属性的读取,修改进行拦截(数据劫持)
数组类型 通过重写更新数组的一系列方法来实现拦截(对数组的变更方法进行了包裹)
Object,defineProperty(data,'count',{
get(){}
set(){}
})
存在问题
新增属性,删除属性 界面不会更新
直接通过下标修改数组,界面不会自动更新
vue3 的响应式原理
实现原理
通过Proxy(代理)拦截对象中任意属性的变化 包括 属性值的读写 属性的添加 属性的删除等
通过Reflect(反射)对源对象的属性进行操作
let person = {
name: "zs",
age: 19,
};
// 模拟vue3中实现响应式
const p = new Proxy(person, {
// 有人读取p的某个属性时调用
get(target, propName) {
console.log(target, propName);
// return target[propName];
return Reflect.get(target, propName);
},
// 有人修改p的某个属性,或给p追加某个属性时调用
set(target, propName, value) {
// target[propName] = value;
Reflect.set(target, propName, value);
},
// 有人删除p的某一个属性时调用
deleteProperty(target, propName) {
// return delete target[propName];
return Reflect.defineProperty(target, propName);
},
});
reactive 对比 ref
从定义数据角度对比
ref用来定义 基本类型数据
reactive用来定义 对象(或数组)类型数据
备注 ref也可以用来定义对象或数组类型数据 它内部会自动通过reactive转为代理对象
从原理角度对比
ref通过object.defineProperty()的get和set来实现响应式(数据劫持)
reactive通过使用Proxy来实现响应式(数据劫持),并通过Reflect操作元数据内部的数据
从使用角度对比
ref定义的数据 操作数据需要.value 读取数据时模板中直接读取不需要.value
reactive定义的数据 操作数据与读取数据 均不需要.value
setup 的两个注意点
setup执行的实际
在beforeCreate之前执行一次,this是undefined
setup的参数
props 值为对象 包含 组件外部传递过来 且组件内部声明接受了的属性
context 上下文对象
attrs 值为对象 包含 组件外部传递过来 但没有在props配置中声明的属性 相当于this.$attrs
slots 收到的插槽内容 相当于this.$slots
emit 分发自动以事件的函数 相当于this.$emit
