双一流建设网站,深圳宝安中心医院,wordpress 数字商城,品牌设计网站公司1. Composition API(常用部分) 文档: ​ https://composition-api.vuejs.org/zh/api.html 1) setup 新的option, 所有的组合API函数都在此使用, 只在初始化时执行一次函数如果返回对象, 对象中的属性或方法, 模板中可以直接使用2) ref 作用: 定义一个数据的响应式语法: cons…1. Composition API(常用部分) 文档: ​ https://composition-api.vuejs.org/zh/api.html 1) setup 新的option, 所有的组合API函数都在此使用, 只在初始化时执行一次函数如果返回对象, 对象中的属性或方法, 模板中可以直接使用2) ref 作用: 定义一个数据的响应式语法: const xxx = ref(initValue): 创建一个包含响应式数据的引用(reference)对象js中操作数据: xxx.value模板中操作数据: 不需要.value 一般用来定义一个基本类型的响应式数据templateh2{{count}}/h2hrbutton @click="update"更新/button /templatescript import {ref } from 'vue' export default {/* 在Vue3中依然可以使用data和methods配置, 但建议使用其新语法实现 */// data () {// return {// count: 0// }// },// methods: {// update () {// this.count++// }// }/* 使用vue3的composition API */setup () {// 定义响应式数据 ref对象const count = ref(1)console.log(count)// 更新响应式数据的函数function update () {// alert('update')count.value = count.value + 1}return {count,update}} } /script3) reactive 作用: 定义多个数据的响应式const proxy = reactive(obj): 接收一个普通对象然后返回该普通对象的响应式代理器对象响应式转换是“深层的”：会影响对象内部所有嵌套的属性内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据都是响应式的templateh2name: {{state.name}}/h2h2age: {{state.age}}/h2h2wife: {{state.wife}}/h2hrbutton @click="update"更新/button /templatescript /* reactive: 作用: 定义多个数据的响应式const proxy = reactive(obj): 接收一个普通对象然后返回该普通对象的响应式代理器对象响应式转换是“深层的”：会影响对象内部所有嵌套的属性内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据都是响应式的 */ import {reactive, } from 'vue' export default {setup () {/* 定义响应式数据对象*/const state = reactive({name: 'tom',age: 25,wife: {name: 'marry',age: 22},})console.log(state, state.wife)const update = () = {state.name += '--'state.age += 1state.wife.name += '++'state.wife.age += 2}return {state,update,}} } /script4) 比较Vue2与Vue3的响应式(重要) vue2的响应式 核心: 对象: 通过defineProperty对对象的已有属性值的读取和修改进行劫持(监视/拦截)数组: 通过重写数组更新数组一系列更新元素的方法来实现元素修改的劫持 Object.defineProperty(data, 'count', {get () {}, set () {} })问题 对象直接新添加的属性或删除已有属性, 界面不会自动更新直接通过下标替换元素或更新length, 界面不会自动更新 arr[1] = {} Vue3的响应式 核心: 通过Proxy(代理): 拦截对data任意属性的任意(13种)操作, 包括属性值的读写, 属性的添加, 属性的删除等…通过 Reflect(反射): 动态对被代理对象的相应属性进行特定的操作文档: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxyhttps://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' !DOCTYPE html html lang="en" headmeta charset="UTF-8"