银河盛世网站建设,深圳网站建设61916,丹灶网站建设,南充网站建设设计略奥文章目录 简介提升使用创建脚手架vite 常用Composition APIsetuprefreactive函数响应式vue2响应式vue3实现响应式 reactive对比ref注意计算属性computed函数 监视watch函数watchEffect函数 生命周期hook函数toRef 简介
2020年9月18日#xff0c;Vue.js发布3.0版本#xff0c… 文章目录 简介提升使用创建脚手架vite 常用Composition APIsetuprefreactive函数响应式vue2响应式vue3实现响应式 reactive对比ref注意计算属性computed函数 监视watch函数watchEffect函数 生命周期hook函数toRef 简介
2020年9月18日Vue.js发布3.0版本代号One Piece海贼王
提升
**Vue3可以更好的支持TypeScript **新特性 Composition API组合API setup配置ref与reactivewatch与watchEffectprovide与inject… 新的内置组件 FragmentTeleportSuspense 其他改变 新的生命周期钩子data 选项应始终被声明为一个函数移除keyCode支持作为 v-on 的修饰符
使用
创建
脚手架 查看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 servevite
什么是vite 新一代前端构建工具 官方文档https://v3.cn.vuejs.org/guide/installation.html#vite
vite官网https://vitejs.cn
## 创建工程
npm init vite-app project-name
## 进入工程目录
cd project-name
## 安装依赖
npm install
## 运行
npm run dev常用Composition API
setup 理解Vue3.0中一个新的配置项值为一个函数。 setup是所有Composition API组合API“ 表演的舞台 ”。 组件中所用到的数据、方法等等均要配置在setup中。 setup函数的两种返回值 若返回一个对象则对象中的属性、方法, 在模板中均可以直接使用。重点关注若返回一个渲染函数则可以自定义渲染内容。了解注意点 尽量不要与Vue2.x配置混用 Vue2.x配置data、methos、computed…中可以访问到setup中的属性、方法。但在setup中不能访问到Vue2.x配置data、methos、computed…。如果有重名, setup优先。 setup不能是一个async函数因为返回值不再是return的对象, 而是promise, 模板看不到return对象中的属性。后期也可以返回一个Promise实例但需要Suspense和异步组件的配合
async setup(){//数据let name 张三let age 18let a 200//方法function sayHello(){alert(我叫${name}我${age}岁了你好啊)}function test2(){console.log(name)console.log(age)console.log(sayHello)console.log(this.sex)console.log(this.sayWelcome)}//返回一个对象常用return {name,age,sayHello,test2,a}ref
作用: 定义一个响应式的数据语法: const xxx ref(initValue) 创建一个包含响应式数据的引用对象reference对象简称ref对象。JS中操作数据 xxx.value模板中读取数据: 不需要.value直接div{{xxx}}/div 备注 接收的数据可以是基本类型、也可以是对象类型。基本类型的数据响应式依然是靠Object.defineProperty()的get与set完成的。对象类型的数据内部 “ 求助 ” 了Vue3.0中的一个新函数—— reactive函数。
import {ref} from vueexport default {name: App,setup(){//数据let name ref(张三)let age ref(18)let job ref({type:前端工程师,salary:30K})reactive函数
作用: 定义一个对象类型的响应式数据基本类型不要用它要用ref函数语法const 代理对象 reactive(源对象)接收一个对象或数组返回一个代理对象Proxy的实例对象简称proxy对象reactive定义的响应式数据是“深层次的”。内部基于 ES6 的 Proxy 实现通过代理对象操作源对象内部数据进行操作。 import {reactive} from vueexport default {name: App,setup(){//数据let person reactive({name:张三,age:18,job:{type:前端工程师,salary:30K,a:{b:{c:666}}},hobby:[抽烟,喝酒,烫头]})
响应式
vue2响应式
实现原理 对象类型通过Object.defineProperty()对属性的读取、修改进行拦截数据劫持。 数组类型通过重写更新数组的一系列方法来实现拦截。对数组的变更方法进行了包裹。
Object.defineProperty(data, count, {get () {}, set () {}
})存在问题
新增属性、删除属性, 界面不会更新。直接通过下标修改数组, 界面不会自动更新。
vue3实现响应式
实现原理:
通过Proxy代理: 拦截对象中任意属性的变化, 包括属性值的读写、属性的添加、属性的删除等。通过Reflect反射: 对源对象的属性进行操作。MDN文档中描述的Proxy与Reflect Proxyhttps://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy Reflecthttps://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect
new Proxy(data, {// 拦截读取属性值get (target, prop) {return Reflect.get(target, prop)},// 拦截设置属性值或添加新属性set (target, prop, value) {return Reflect.set(target, prop, value)},// 拦截删除属性deleteProperty (target, prop) {return Reflect.deleteProperty(target, prop)}
})proxy.name tom reactive对比ref
从定义数据角度对比 ref用来定义基本类型数据。reactive用来定义对象或数组类型数据。备注ref也可以用来定义对象或数组类型数据, 它内部会自动通过reactive转为代理对象。 从原理角度对比 ref通过Object.defineProperty()的get与set来实现响应式数据劫持。reactive通过使用Proxy来实现响应式数据劫持, 并通过Reflect操作源对象内部的数据。 从使用角度对比 ref定义的数据操作数据需要.value读取数据时模板中直接读取不需要.value。reactive定义的数据操作数据与读取数据均不需要.value。
注意 setup执行的时机 在beforeCreate之前执行一次this是undefined。 setup的参数 props值为对象包含组件外部传递过来且组件内部声明接收了的属性。context上下文对象 attrs: 值为对象包含组件外部传递过来但没有在props配置中声明的属性, 相当于 this.$attrs。slots: 收到的插槽内容, 相当于 this.$slots。emit: 分发自定义事件的函数, 相当于 this.$emit。
计算属性
computed函数
import {computed} from vuesetup(){...//计算属性——简写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]}})
}监视
watch函数
监视reactive定义的响应式数据时oldValue无法正确获取、强制开启了深度监视deep配置失效。监视reactive定义的响应式数据中某个属性时deep配置有效。
//情况一监视ref定义的响应式数据
watch(sum,(newValue,oldValue){console.log(sum变化了,newValue,oldValue)
},{immediate:true})//情况二监视多个ref定义的响应式数据
watch([sum,msg],(newValue,oldValue){console.log(sum或msg变化了,newValue,oldValue)
}) /* 情况三监视reactive定义的响应式数据若watch监视的是reactive定义的响应式数据则无法正确获得oldValue若watch监视的是reactive定义的响应式数据则强制开启了深度监视
*/
watch(person,(newValue,oldValue){console.log(person变化了,newValue,oldValue)
},{immediate:true,deep:false}) //此处的deep配置不再奏效//情况四监视reactive定义的响应式数据中的某个属性
watch(()person.job,(newValue,oldValue){console.log(person的job变化了,newValue,oldValue)
},{immediate:true,deep:true}) //情况五监视reactive定义的响应式数据中的某些属性
watch([()person.job,()person.name],(newValue,oldValue){console.log(person的job变化了,newValue,oldValue)
},{immediate:true,deep:true})//特殊情况
watch(()person.job,(newValue,oldValue){console.log(person的job变化了,newValue,oldValue)
},{deep:true}) //此处由于监视的是reactive素定义的对象中的某个属性所以deep配置有效watchEffect函数 watch的套路是既要指明监视的属性也要指明监视的回调。 watchEffect的套路是不用指明监视哪个属性监视的回调中用到哪个属性那就监视哪个属性。 watchEffect有点像computed 但computed注重的计算出来的值回调函数的返回值所以必须要写返回值。而watchEffect更注重的是过程回调函数的函数体所以不用写返回值。
//watchEffect所指定的回调中用到的数据只要发生变化则直接重新执行回调。
watchEffect((){const x1 sum.valueconst x2 person.ageconsole.log(watchEffect配置的回调执行了)
})生命周期
Vue3.0中可以继续使用Vue2.x中的生命周期钩子但有有两个被更名 beforeDestroy改名为 beforeUnmountdestroyed改名为 unmounted Vue3.0也提供了 Composition API 形式的生命周期钩子与Vue2.x中钩子对应关系如下 beforeCreatesetup()createdsetup()beforeMount onBeforeMountmountedonMountedbeforeUpdateonBeforeUpdateupdated onUpdatedbeforeUnmount onBeforeUnmountunmounted onUnmounted hook函数 什么是hook—— 本质是一个函数把setup函数中使用的Composition API进行了封装。 类似于vue2.x中的mixin。 自定义hook的优势: 复用代码, 让setup中的逻辑更清楚易懂。
import {reactive,onMounted,onBeforeUnmount} from vue
export default function (){//实现鼠标“打点”相关的数据let point reactive({x:0,y:0})//实现鼠标“打点”相关的方法function savePoint(event){point.x event.pageXpoint.y event.pageYconsole.log(event.pageX,event.pageY)}//实现鼠标“打点”相关的生命周期钩子onMounted((){window.addEventListener(click,savePoint)})onBeforeUnmount((){window.removeEventListener(click,savePoint)})return point
}
调用
templateh2我是Test组件/h2h2当前点击时鼠标的坐标为x{{point.x}}y{{point.y}}/h2
/templatescriptimport usePoint from ../hooks/usePointexport default {name:Test,setup(){const point usePoint()return {point}}}
/scripttoRef 作用创建一个 ref 对象其value值指向另一个对象中的某个属性。 语法const name toRef(person,name) 应用: 要将响应式对象中的某个属性单独提供给外部使用时。 扩展toRefs与toRef功能一致但可以批量创建多个 ref 对象语法toRefs(person)
let person reactive({name:张三,age:18,job:{j1:{salary:20}}})const x toRefs(person)console.log(******,x)//返回一个对象常用return {person,...toRefs(person)
