vue系列==vue3新语法
vue系列==vue3新语法
1、setup组合式API入口函数
2、利用ref函数定义响应式数据
3、利用reactive函数定义响应式数据
1、setup组合式API入口函数
1、Vue3为组合式API提供了一个setup函数，所有组合式API函数都是在此函数中调用的，它是组合式API的使用入口。setup函数接收两个参数：第1个参数是props对象，包含传入组件的属性；第2个参数是context上下文对象，包含attrs、emit、slot等对象属性。这两个参数在本节暂时不做深入讲解，在第4章中开始对它们进行学习。在使用组合式API定义响应式数据之前，有两个点需要我们重点关注：一个是setup函数必须返回一个对象，在模板中可以直接读取对象中的属性，以及调用对象中的函数；另一个是setup函数中的this在严格模式下是undefined，不能像选项式API那样通过this来进行响应式数据的相关操作
2、但是下面的代码却不能自动修改messge的值，因为他不是一个响应式的函数，所有不能进行响应式更改
<p>vue3新语法</p> <div >{{ message }}</div> <div><a :href="href">{{ href }}</a></div> <div v-if="ok">This is OK</div> <button v-on:click="changeMessage">Change Message</button> </template> <script> export default { setup() { let message = 'Hello Vue 3.0' const href = "https://nodejs.org/zh-cn" const ok = true function changeMessage() { alert(message) message = 'ddddd' } return { message, href, ok, changeMessage } } }
2、利用ref函数定义响应式数据
1、ref是Vue3组合式API中常见的用来定义响应式数据的函数。ref函数接收一个任意类型的数据参数作为响应式数据，由Vue内部保存。ref函数返回一个响应式的ref对象，通过ref对象的value属性可以读取或者更新内部保存的数据。
2、下面的代码添加ref就可以变为响应式数据，更新的时候采用value的方式
3、ref函数除了可以接收基础类型的数据，还可以接收对象或数组类型的数据。
<template> <!-- vue3新语法 --> <p>vue3新语法</p> <div >{{ message }}</div> <div><a :href="href">{{ href }}</a></div> <div v-if="ok">This is OK</div> <button v-on:click="changeMessage">Change Message</button> </template> <script> import {ref} from "vue"; export default { setup() { let message = ref('Hello Vue 3.0') //添加ref作为响应式数据 const href = "https://nodejs.org/zh-cn" const ok = true function changeMessage() { //添加方法，响应式数据改变时，方法也会改变，采用value.value方式 alert(message.value) message.value = 'ddddd' } return { message, href, ok, changeMessage } } }
3、利用reactive函数定义响应式数据
1、Vue3提供了reactive函数，让开发者可以一次性定义包含多个数据的响应式对象。reactive函数接收一个包含n个基础类型或对象类型属性数据的对象参数，它会返回一个响应式的代理对象，一般我们称此对象为“reactive对象”。
2、reactive函数进行的是一个深度响应式处理。也就是说，当我们通过reactive对象更新参数对象中的任意层级属性数据后，都会触发页面的自动更新。
3、如果你的数据结构比较简单，或者只需要跟踪顶层属性的变化，使用
ref就足够了。但如果你的数据结构复杂，需要跟踪嵌套属性的变化，那么reactive会是更好的选择。4、
<template> <!-- vue3新语法 --> <p>vue3新语法</p> <div >{{ personref.person }}</div> <div >{{ personreactive.person }}</div> <div >{{ personreactive.msg }}</div> <div >{{ personreactive.person.name }}</div> <div >{{ personreactive.person.age }}</div> <div >{{ personreactive.trr }}</div> <button @click="changePersonRef">Change Person Ref</button> <button @click="changePersonReactive">Change Person Reactive</button> <button @click="changePersonReactiveMsg">Change Person Reactive Msg</button> <button @click="changePersonReactiveTrr">Change Person Reactive Trr</button> </template> <script> import {reactive, ref} from "vue"; export default { setup() { let personref = ref({person: 1, age: 20}); //ref 用于响应式数据 let personreactive = reactive({ msg: "hello", person:{name: "zhangsan", age: 20}, trr: [1, 2, 3] }) function changePersonRef() { personref.value.person = 2; } function changePersonReactive() { personreactive.person.name = "lisi"; } function changePersonReactiveMsg() { personreactive.msg = "world"; } function changePersonReactiveTrr() { personreactive.trr.push(4); } return { personref, personreactive, changePersonRef, changePersonReactive, changePersonReactiveMsg, changePersonReactiveTrr } }, }
5、toRefs与toRef函数
1、toRefs函数能一次性将reactive对象包含的所有属性值都包装成ref对象，而toRef函数只能一次处理一个属性
2、使用reactive函数进行代码简化的问题
3、他的主要功能就是简化代码，从而可以提升可读性
4、下面是简化之后的代码
const staterefs = toRefs(personreactive) return { personref, personreactive, changePersonRef, changePersonReactive, changePersonReactiveMsg, changePersonReactiveTrr, msg: staterefs.msg, name: staterefs.person.name, age: staterefs.person.age, trr: staterefs.trr, }