网站备案名字填写,高邮做网站,娱乐类网站开发,wordpress图片关联文章文章目录 Vue3简介创建Vue3工程使用vite创建vue-cli方式 常用 Composition API启动项 - setup()setup的执行时机与参数 响应式原理vue2中的响应式vue3中的响应式ref函数reactive函数reactive与ref对比 计算属性 - computed监视属性 - watchwatchEffect Vue3生命周期自定义hook函… 文章目录 Vue3简介创建Vue3工程使用vite创建vue-cli方式 常用 Composition API启动项 - setup()setup的执行时机与参数 响应式原理vue2中的响应式vue3中的响应式ref函数reactive函数reactive与ref对比 计算属性 - computed监视属性 - watchwatchEffect Vue3生命周期自定义hook函数toRef 其他Composition APIshallowReactive()与shallowRef()readonly() 与shallowReadonly()toRaw与markRawcustomRefprovide与inject对响应式的数据进行判断 新的组件与其他变化Fragment片段Teleport传送Suspense悬浮其他变化全局API的转移其他改动 Vue3简介
Vue3带来了
1、性能的提升 打包大小减少41%初次渲染快55%, 更新渲染快133%内存减少54%…… 2、源码的升级 使用Proxy代替defineProperty实现响应式重写虚拟DOM的实现和Tree-Shaking… 3、拥抱TypeScript4、新的特性 Composition API组合API 用前要引入 ○ setup配置 ○ ref与reactive ○ watch与watchEffect ○ provide与inject ○ … 新的内置组件 ○ Fragment ○ Teleport ○ Suspense 其他改变 ○ 新的生命周期钩子 ○ data 选项应始终被声明为一个函数 ○ 移除keyCode支持作为 v-on 的修饰符 ○ …
创建Vue3工程
使用vite创建
官方文档https://v3.cn.vuejs.org/guide/installation.html#vite
vite官网https://vitejs.cn
什么是vite—— 新一代前端构建工具。优势如下 开发环境中无需打包操作可快速的冷启动。轻量快速的热重载HMR。真正的按需编译不再等待整个应用编译完成。 传统构建 与 vite构建对比图 vue-cli方式
VUE3官方文档
## 查看vue/cli版本确保vue/cli版本在4.5.0以上
vue --version
## 安装或者升级你的vue/cli
npm install -g vue/cli
## 创建
vue create vue_test
## 启动
cd vue_test
npm run serve常用 Composition API
启动项 - setup()
setup是所有Composition AIP组合API“表演的舞台”。
1、组件中所用到的数据、方法等均要配置在setup中不需要专门的data、methods等配置项了。2、setup函数的两种返回值 若返回一个对象则对象中的属性、方法在模板中均可以直接使用。若返回一个渲染函数则可以自定义渲染内容。了解 setup的执行时机与参数
setup()执行的时机是先于beforecreated的此时vue实例尚未创建因此setup()函数内部this为undefined。
setup()可以接收两个参数
props值为一个对象包含了组件外部传递过来且在组件内部声明接收了的属性项。context上下文对象主要包含下边3个属性 attrs值为对象包含组件外部传递过来且在本组件中props配置中没有声明的属性该对象也存在于this.$attrsslots收到的插槽内容相当于 this.$slotsemits分发自定义事件的函数相当于this.$emit
响应式原理
vue2中的响应式
在vue2中通过Object.defineProperty()对对象属性的读取、修改进行了拦截数据劫持。对数组类型通过重写数组更新的一系列方法实现拦截对其变更方法进行了包裹。
这种响应式实现存在以下问题
新增属性、删除属性界面不会更新直接通过下标修改数组界面不会自动更新。
vue3中的响应式
1、通过Proxy代理拦截对象中任意属性的变化包含属性值的读写、属性的添加、属性的增删2、通过Reflect反射对被代理对象的属性进行操作
ref函数
在setup中安置的数据项并不会直接被vue监测如果想要使其被vue监测实现响应式的更新应该使用ref函数其作用是定义一个响应式的数据的引用对象reference object
使用ref函数构建的数据项类型是一个RefImpl引用实现类型对RefImpl对象的value属性更新对于Vue框架是可见的但在模板中使用其时不必加value属性Vue框架会自动解析到其中的value。 ref函数的参数也可以是一个对象如果是对象其value属性是一个Proxy对象拥有原对象的每一个属性对其的修改也是响应式的。
reactive函数
reactive函数的作用是定义一个对象数组类型的响应式数据基本类型用refreactive只能处理对象类型的数据。
语法const 代理对象 reactive(源对象)接收一个对象或数组返回其代理对象Proxy实例
reactive定义的响应式数据是深层次的即对其多层数据的更改同样是响应式。 reactive与ref对比
1、从定义数据角度
ref用于定义基本数据类型reactive用来定义对象或者数组类型ref也可以用来定义对象数组类型数据它内部会自动通过reactive转为代理对象。 2、从原理角度ref通过Object.defineProperty()的get与set实现响应式数据劫持reactive通过使用Proxy实现响应式并通过Reflect操作源对象内部的数据。
3、从使用角度
ref定义的数据操作数据需要.value模板使用不需要.valuereactive定义的数据操作数据与模板使用均不需要.value
计算属性 - computed
Vue3中的computed不再是内置选项需要import导入随后在setup()中配置配置方式与Vue2中基本一致。
监视属性 - watch
watch属性在Vue3的组合式API中也不再是内置属性在需要使用时进行import。
监视属性当监视对象分为ref和reactive时有下边几种不同的情况。
1、当监视ref定义的响应式数据 watch函数还有第三个选填参数配置一个对象设置immediate、deep是否为true。 2、监视ref定义的多个响应式数据 可以写多个watch函数当然也可以写为数组形式当写为数组形式监视多个数据时handle回调中 newValue、oldValue也是一个数组根据下标判断是哪个具体的数据。 3、监视reactive定义的一个响应式数据 注意这种虽然可以触发监视逻辑但是无法获取正确的odlvalueconsole结果中old和new的值都是新的值 对于reactive定义的响应式数据进行监视是强制开启深度监视的即便你配置deep为false也是无效这与reactive的实现方式有关。
4、监视reactive定义的响应式对象的某个属性。 注意此时的监视对象需要写为函数类型因为假如你直接使用person.name它其实是一个普通类型的值没有响应式效果。
5、监视reactive定义的响应式属性的多个属性。 数组中每个元素都得写为函数类型。
总结 一般在生产情况中使用reactive但此时oldValue会失效如果要解决这个问题可以将其单独拎出来使用ref
watchEffect
watchEffect不需要证明具体监视哪个属性因此写起来更加高效即effect。watchEffect有点像computed监视回调中用到哪个属性就监视哪个属性但computed注重计算出来的值回调函数返回值所以必须写返回值。而wacthEffect更加注重过程回调函数的函数体所以不用写返回值。 Vue3生命周期
1、Vue3中可以继续使用Vue2中生命周期的钩子但有两个被改名了
beforeDestroy改名为beforeUnmountdestroyed改名为unmounted
2、Vue3中也提供了组合式API形式的生命周期钩子与Vue2中的钩子对应关系如下
注意前两个函数beforeCreate与Create 相当于Vue3中的setup阶段
自定义hook函数
这里的hook本质上是一个函数目的是将setup中可以复用的组合式API进行一个封装类似于Vue2中mixin。
自定义hook的优势也与mixin一样复用代码使得setup中写的逻辑更加清晰易懂。
step1定义hook文件夹实现定义hook逻辑的js文件 step2引入并在setup中直接使用。
toRef
作用创建一个ref对象使其value属性指向另一个对象的某个属性假如我们要将响应式对象中某个属性单独提供给外部使用时可以使用ref。语法const name toRef(person, name)扩展toRefs批量创建不再需要第二个参数会将对象的每一个属性批量创建为同名的RefImpl。 使用toRef建立引用绑定关系后在template中就可以直接使用这些属性且不会丢失响应式特性 使用toRefs结合...语法
其他Composition API
shallowReactive()与shallowRef()
shallow是浅层次的意思。
shallowReactive只处理对象最外层属性的响应式浅响应式shallowRef只处理基本数据类型的响应式不进行对象的响应式处理。什么时候用 如果有一个对象数据结构比较深只希望最外层属性响应式变化使用shallowReactive如果有一个对象数据后续功能不会修改对象中的属性而是生成新的对象替换使用shallowRef
readonly() 与shallowReadonly()
readonly让一个响应式数据变为只读深只读shallowReadonly让一个响应式数据变为只读浅只读应用场景不希望数据被修改
toRaw与markRaw
toRaw:将一个reactive生成的响应式对象转为普通对象markRaw标记一个对象使其永远不会再成为响应式对象
customRef
作用创建一个自定义的ref并对其依赖跟踪和更新触发进行显示控制。
provide与inject
实现祖孙组件间至少隔一代的通信实际上父子间也可以只不过父子间一般使用props通信 step1祖组件中provice step2后代组件inject 对响应式的数据进行判断
isRef检查一个值是否为一个ref对象isReactive检查一个对象是否是由reactive创建的响应式代理isReadonly检查一个对象是否是由readonly创建的只读代理isProxy检查一个对象是否是由reactive或者readonly创建的代理。
新的组件与其他变化
Fragment片段
在Vue2中组件必须有一个根标签div在Vue3中组件可以没有根标签内部会将多个标签包含在一个Fragment的虚拟元素中这样的好处在于减少标签层级减小内存占用
Teleport传送
teleport是一种能够将我们的组件的HTML结构移动到指定位置的技术。
Suspense悬浮
等待异步组件时渲染一些额外的组件优化用户体验
其他变化
全局API的转移
Vue2中有很多全局的API和配置借助的Vue.xxx实现而在Vue3中取消了Vue这个实例转而使用app替代很多Vue原有的API转移到了app实例上。 配置config全局组件component全局指令directive全局混入mixin引入插件use给原型配置属性prototype
其他改动
1、data应该始终写为函数返回值。2、移除keyCode作为v-on的修饰符keyup.13非法3、移除v-on.native修饰符。
vue2中默认给组件绑定事件为自定义事件如果是内置事件需要使用native声明而在vue3中当父组件给子组件绑定事件时子组件在使用emits触发事件时如果有相应配置则是自定义事件如果没有配置则会被识别为内置事件。
4、移除了过滤器filter推荐使用计算属性或者方法调用实现。
