小学最好的网站建设,wordpress5.2中文版下载,最好的网站建设用途,莱芜新闻联播直播vue系列vue3新语法
1、setup组合式API入口函数
2、利用ref函数定义响应式数据
3、利用reactive函数定义响应式数据 1、setup组合式API入口函数 1、Vue3为组合式API提供了一个setup函数#xff0c;所有组合式API函数都是在此函数中调用的#xff0c;它是组合式API的使用入口…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的值因为他不是一个响应式的函数所有不能进行响应式更改 pvue3新语法/pdiv {{ message }}/divdiva :hrefhref{{ href }}/a/divdiv v-ifokThis is OK/divbutton v-on:clickchangeMessageChange Message/button/template
scriptexport default {setup() {let message Hello Vue 3.0const href https://nodejs.org/zh-cnconst 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新语法 --pvue3新语法/pdiv {{ message }}/divdiva :hrefhref{{ href }}/a/divdiv v-ifokThis is OK/divbutton v-on:clickchangeMessageChange Message/button/template
scriptimport {ref} from vue;export default {setup() {let message ref(Hello Vue 3.0) //添加ref作为响应式数据const href https://nodejs.org/zh-cnconst 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新语法 --pvue3新语法/pdiv {{ personref.person }}/divdiv {{ personreactive.person }}/divdiv {{ personreactive.msg }}/divdiv {{ personreactive.person.name }}/divdiv {{ personreactive.person.age }}/divdiv {{ personreactive.trr }}/divbutton clickchangePersonRefChange Person Ref/buttonbutton clickchangePersonReactiveChange Person Reactive/buttonbutton clickchangePersonReactiveMsgChange Person Reactive Msg/buttonbutton clickchangePersonReactiveTrrChange 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,}
