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 = truefunction 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 = truefunction 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,}