vue3笔记----记录⾃天禹⽼师的vue2+vue3全套教程（vue3部分）vue3笔记
⼀、Vue3简介
1、性能的提升
1. 打包⼤⼩减少了41%
2. 初次渲染快55%，更新渲染快144%
3. 内存减少54%
…
2、源码的升级
1. 使⽤Proxy代替defineProperty实现响应式
2. 重写虚拟DOm的实现和Tree-Shaking
…
3、Vue3可以更好的⽀持TypeScript
4、新的特性
1. Composition API（组合API）
1. setup配置
2. ref与reactive
3. watch与watchEffect
4. provide与inject
…
2. 新的内置组件
1. Fragment
2. Teleport
3. Suspense
3. 其他改变
1. 新的⽣命周期钩⼦
2. data选项应始终被声明为⼀个函数
3. 移除keyCode⽀持作为v-on的修饰符
…
⼆、创建vue3⼯程
1、使⽤vue-cli创建
## 查看@vue/cli版本，确保@vue/cli版本在4.5.0以上
vue --version
## 安装或升级@vue/cli
npm install -g @vue/cli
## 创建
vue create <project-name>
##启动
cd vue_test
npm run serve
2、使⽤vite创建
1. 声明是vite？
vite----新⼀代前端构建⼯具
2. 优势
1. 开发环境中，⽆需打包操作，可快速的冷启动
2. 轻量快速的热重载（HMR）
3. 真正的按需编译，不再等待整个应⽤编译完成3. 传统构建与vite构建对⽐图
4. 步骤
## 创建⼯程
npm init vite-app <project-name>
## 进⼊⼯程⽬录
cd <project-name>
## 安装依赖
npm install
## 运⾏
npm run dev
三、常⽤Composition API
1、setup
1. setup是Vue3.0中⼀个新的配置项，值为⼀个函数
2. setup是所有Composition API（组合API）“ 表演的舞台 ”。
3. 组件中所⽤到的：数据、⽅法等等，均要配置在setup中。
4. setup函数中的两种返回值：
1. 若返回⼀个对象，则对象中的属性、⽅法，在模板中均可以直击使⽤（重点关注）
2. 若返回⼀个渲染函数：则可以⾃定义渲染内容（了解）
5. 注意点：
1. 尽量不要与vue2 配置混合使⽤
①vue2配置（data、methods、computed。。。）中可以访问到setup中的属性、⽅法。
②但在setup中不能访问到vue2配置
③如果有重名，setup有优先
2. setup不能是⼀个async函数，因为返回值不再是return的对象，⽽是promise，模板看不到return对象中的属性。（后期也可
以返回⼀个promise实例，但需要suspense和异步组件的配合）
2、ref函数
1. 作⽤：定义⼀个响应式的数据
2. 语法：const xxx = ref(initValue)
1. 创建⼀个包含响应式数据的引⽤对象（reference对象，简称ref对象）
2. js中操作数据：xxx.value
3. 模板中读取数据：不需要xxx.value，直接<div>{{xxx}}</div>
3. 备注：
1. 接收的数据可以是：基本类型、也可以是对象类型
2. 基本类型的数据：响应式依然是靠Object.defineProperty()的get和set完成的
3. 对象类型的数据：内部求助了vue3.0中的⼀个新函数------reactive函数（下⼀⼩节）
3、reactive函数
1. 作⽤：定义⼀个对象类型的响应式数据（基本类型不要⽤它，要⽤ref函数）
2. 语法：const 代理对象 = reactive(源对象)接收⼀个对象（或数组），返回⼀个代理对象（proxy对象）
3. reactive定义的响应式数据是“深层次的”
4. 内部基于ES6的Proxy实现，通过代理对象操作源对象内部数据进⾏操作
4、Vue3.0中的响应式原理
1. vue2中的响应式
1. 实现原理
①对象类型：通过Object.defineProperty()对属性的读取，修改进⾏拦截（数据劫持）
②数组类型：通过重写更新数组的⼀系列⽅法来实现拦截（对数组的变更⽅法进⾏了包裹）
Object.defineProperty(data,'count',{
get(){},
set(){}
})
2. 存在问题：
①新增属性、删除属性，界⾯不会更新
②直接通过下标修改数组，界⾯不会⾃动更新
2. vue3的响应式
1. 通过Proxy（代理）：拦截对象中任意属性的变化，包括：属性值的读写、属性的添加、属性的删除等
2. 通过Reflect（反射）：对源对象的属性进⾏操作
new Proxy(data,{
//读取属性值
get(target,prop){
(target,prop)
},
//拦截设置属性值或添加新属性
set(target,prop,value){
return Reflect.set(target,prop,value)
},
//拦截删除属性
deleteProperty(target,prop){
return Reflect.deleteProperty(target,prop)
}
})
5、setup的两个注意点
1. setup执⾏的时机：
在beforecreate之前执⾏⼀次，this是undefined
2. setup的参数
1. props：值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性
2. context：上下⽂对象
1. attrs：值为对象，包括：组件外部传递过来，但没有在props配置中声明的属性，相当于this.$attrs
2. slots：收到的插槽内容，相当于this.$slots
const的作用3. emit：分为⾃定义事件的函数，相当于this.$emit
6、reactive对⽐ref
1. 从定义数据⾓度对⽐：
1. ref⽤来定义基本数据类型
2. reactive⽤来定义：对象（或数组）类型数据
3. 备注：ref也可以⽤来定义对象（或数组）类型的数据，它内部会⾃动reactive转为代理对象
2. 从原理⾓度对⽐：
1. ref通过Object.defineProperty()的get和set来实现响应式（数据劫持）
2. reactive通过Proxy来实现响应式（数据劫持），并通过Reflect操作源对象内部数据
3. 从使⽤⾓度对⽐：
1. ref定义的数据：操作数据需要xxx.value，读取数据时模板中直接读取不需要xxx.value
2. reactive定义的数据：操作数据与读取数据：均不需要xxx.value
7、计算属性与监视
1. computed函数
1. 与vue2中的计算属性computed配置⼀致
2. 写法
import{computed}from'vue'
setup(){
...
//简写，不考虑修改
let fullName =computed(()=>{
return person.firstName +'-'+ person.lastName
})
/
/完整写法
let fullName =computed({
get(){
return person.firstName+'-'+person.lastName
},
set(value){
const nameArr = value.split('-')
person.firstName=nameArr[0]
person.lastName=nameArr[1]
}
})
}
2. watch函数
1. 与vue2中的watch配置功能⼀致
2. 两个⼩坑：
1. 监视reactive定义的响应式数据时，oldValue⽆法正确获取，并且强制开启了深度监视（deep配置失效）
2. 监视reactive定义的响应式数据中某个属性时，deep配置有效

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。