vue3总结

1 setup 概述

setup是Vue3中一个新的配置项个函数, 包含数据、方法等，是组合api的“舞台”。

特点如下：

  • setup函数返回的对象中的内容，可直接在模板中使用。
  • setup中访问this是undefined。
  • setup函数会在beforeCreate之前调用，它是“领先”所有钩子执行的。

setup 的返回值

  • 若返回一个对象：则对象中的：属性、方法等，在模板中均可以直接使用**（重点关注）。
  • 若返回一个函数：则可以自定义渲染内容，代码如下：
setup(){return ()=> '你好啊！'
}

setup 与 Options API （选项式）的关系

  • Vue2 的配置（data、methos…）中可以访问到 setup中的属性、方法。
  • 但在setup中不能访问到Vue2的配置（data、methos…）。
  • 如果与Vue2冲突，则setup优先。

setup 语法糖
setup函数有一个语法糖，这个语法糖，可以让我们把setup独立出去，代码如下：
（使用语法糖后不用每次定义数据或者方法都ruten出去）

  <h2>姓名：{{name}}</h2><button @click="changName">修改名字</button>
<!-- 下面的写法是setup语法糖 -->
<script setup lang="ts">console.log(this) //undefined// 数据（注意：此时的name、age、tel都不是响应式数据）let name = '张三'// 方法function changName(){name = '李四'//注意：此时这么修改name页面是不变化的}
</script>

如何使用语法糖，我们可以借助vite中的插件简化。

  1. 第一步：npm i vite-plugin-vue-setup-extend -D
  2. 第二步：vite.config.ts
import { defineConfig } from 'vite'
import VueSetupExtend from 'vite-plugin-vue-setup-extend'export default defineConfig({plugins: [ VueSetupExtend() ]
})

第三步：<script setup lang="ts" name="Person">

2 ref 创建：基本类型的响应式数据

  • 作用：定义响应式变量。

  • 语法：let xxx = ref(初始值)。

  • 返回值：一个RefImpl的实例对象，简称ref对象或ref，ref对象的value属性是响应式的。

  • 注意点：

  • JS中操作数据需要：xxx.value，但模板中不需要.value，直接使用即可。

  • 对于let name = ref('张三')来说，name不是响应式的，name.value是响应式的。

<template><div class="person"><h2>姓名：{{name}}</h2><h2>年龄：{{age}}</h2><button @click="changeName">修改名字</button><button @click="changeAge">年龄+1</button></div>
</template><script setup lang="ts" name="Person">import {ref} from 'vue'// name和age是一个RefImpl的实例对象，简称ref对象，它们的value属性是响应式的。let name = ref('张三')let age = ref(18)// tel就是一个普通的字符串，不是响应式的let tel = '13888888888'function changeName(){// JS中操作ref对象时候需要.valuename.value = '李四'console.log(name.value)// 注意：name不是响应式的，name.value是响应式的，所以如下代码并不会引起页面的更新。// name = ref('zhang-san')}function changeAge(){// JS中操作ref对象时候需要.valueage.value += 1 console.log(age.value)}
</script>

ref 创建：对象类型的响应式数据

  • 其实ref接收的数据可以是：基本类型、对象类型。
  • 若ref接收的是对象类型，内部其实也是调用了reactive函数。
<script lang="ts" setup name="Person">
import { ref } from 'vue'// 数据
let car = ref({ brand: '奔驰', price: 100 })
let games = ref([{ id: 'ahsgdyfa01', name: '英雄联盟' },{ id: 'ahsgdyfa02', name: '王者荣耀' },{ id: 'ahsgdyfa03', name: '原神' }
])
let obj = ref({a:{b:{c:{d:666}}}
})
console.log(car)
function changeCarPrice() {car.value.price += 10
}
function changeFirstGame() {games.value[0].name = '流星蝴蝶剑'
}
function test(){obj.value.a.b.c.d = 999
}
</script>

3 reactive 创建：对象类型的响应式数据

  • 作用：定义一个响应式对象（基本类型不要用它，要用ref，否则报错）
  • 语法：let 响应式对象= reactive(源对象)。
  • 返回值：一个Proxy的实例对象，简称：响应式对象。
  • 注意点：reactive定义的响应式数据是“深层次”的。
<template><div class="person"><h2>汽车信息：一台{{ car.brand }}汽车，价值{{ car.price }}万</h2><h2>游戏列表：</h2><ul><li v-for="g in games" :key="g.id">{{ g.name }}</li></ul><h2>测试：{{obj.a.b.c.d}}</h2><button @click="changeCarPrice">修改汽车价格</button><button @click="changeFirstGame">修改第一游戏</button><button @click="test">测试</button></div>
</template><script lang="ts" setup name="Person">
import { reactive } from 'vue'// 数据
let car = reactive({ brand: '奔驰', price: 100 })
let games = reactive([{ id: 'ahsgdyfa01', name: '英雄联盟' },{ id: 'ahsgdyfa02', name: '王者荣耀' },{ id: 'ahsgdyfa03', name: '原神' }
])
let obj = reactive({a:{b:{c:{d:666}}}
})
function changeCarPrice() {car.price += 10
}
function changeFirstGame() {games[0].name = '流星蝴蝶剑'
}
function test(){obj.a.b.c.d = 999
}
</script>

4 ref 对比 reactive

宏观角度看：

  1. ref用来定义：基本类型数据、对象类型数据；

  2. reactive用来定义：对象类型数据

  • 区别：
  1. ref创建的变量必须使用.value（可以使用volar插件自动添加.value）。
  2. reactive重新分配一个新对象，会失去响应式（可以使用Object.assign去整体替换）。
let car = reactive({brand:'奔驰',price:100})function changeCar(){// car = {brand:'奥拓',price:1} //这么写页面不更新的// car = reactive({brand:'奥拓',price:1}) //这么写页面不更新的// 下面这个写法页面可以更新Object.assign(car,{brand:'奥拓',price:1})}
  • 使用原则：
  1. 若需要一个基本类型的响应式数据，必须使用ref。
  2. 若需要一个响应式对象，层级不深，ref、reactive都可以。
  3. 若需要一个响应式对象，且层级较深，推荐使用reactive。

5 toRefs 与 toRef

  • 作用：将一个响应式对象中的每一个属性，转换为ref对象。
  • 备注：toRefs与toRef功能一致，但toRefs可以批量转换。
  • 语法如下：
<template><div class="person"><h2>姓名：{{person.name}}</h2><h2>年龄：{{person.age}}</h2><h2>性别：{{person.gender}}</h2><button @click="changeName">修改名字</button><button @click="changeAge">修改年龄</button><button @click="changeGender">修改性别</button></div>
</template><script lang="ts" setup name="Person">import {ref,reactive,toRefs,toRef} from 'vue'// 数据let person = reactive({name:'张三', age:18, gender:'男'})// 通过toRefs将person对象中的n个属性批量取出，且依然保持响应式的能力let {name,gender} =  toRefs(person)// 通过toRef将person对象中的gender属性取出，且依然保持响应式的能力let age = toRef(person,'age')// 方法function changeName(){name.value += '~'}function changeAge(){age.value += 1}function changeGender(){gender.value = '女'}
</script>

6 computed

作用：

  1. 根据已有数据计算出新数据（和Vue2中的computed作用一致）。
  2. 计算属性：当一个属性依赖多个属性改变时，一般采用computed方法；当依赖的属性发生改变时，会立即执行get方法，并且重新计算当前最新的val值，最后重新渲染视图；
  3. computed :会默认走缓存，节省性能；
  4. computed中不支持异步；
<template><div class="person">姓：<input type="text" v-model="firstName"> <br>名：<input type="text" v-model="lastName"> <br>全名：<span>{{fullName}}</span> <br><button @click="changeFullName">全名改为：li-si</button></div>
</template><script setup lang="ts" name="App">import {ref,computed} from 'vue'let firstName = ref('zhang')let lastName = ref('san')// 计算属性——只读取，不能修改/* let fullName = computed(()=>{return firstName.value + '-' + lastName.value}) */// 计算属性——既读取又修改let fullName = computed({// 读取get(){return firstName.value + '-' + lastName.value},// 修改set(val){console.log('有人修改了fullName',val)firstName.value = val.split('-')[0]lastName.value = val.split('-')[1]}})function changeFullName(){fullName.value = 'li-si'} 
</script>

7，watch

作用：监视数据的变化（和Vue2中的watch作用一致）
特点：Vue3中的watch只能监视以下四种数据：

  1. ref定义的数据。
  2. reactive定义的数据。
  3. 函数返回一个值（getter函数）。
  4. 一个包含上述内容的数组。

我们在Vue3中使用watch的时候，通常会遇到以下几种情况：

* 情况一

监视ref定义的【基本类型】数据：直接写数据名即可，监视的是其value值的改变。

<template><div class="person"><h1>情况一：监视【ref】定义的【基本类型】数据</h1><h2>当前求和为：{{sum}}</h2><button @click="changeSum">点我sum+1</button></div>
</template><script lang="ts" setup name="Person">import {ref,watch} from 'vue'// 数据let sum = ref(0)// 方法function changeSum(){sum.value += 1}// 监视，情况一：监视【ref】定义的【基本类型】数据  watch(sum)这个里面就不用写sun.value了const stopWatch = watch(sum,(newValue,oldValue)=>{console.log('sum变化了',newValue,oldValue)if(newValue >= 10){stopWatch()//结束监视}})
</script>

* 情况二

监视ref定义的【对象类型】数据：直接写数据名，监视的是对象的【地址值】，若想监视对象内部的数据，要手动开启深度监视。

注意：

  • 若修改的是ref定义的对象中的属性，newValue 和 oldValue 都是新值，因为它们是同一个对象。

  • 若修改整个ref定义的对象，newValue 是新值， oldValue 是旧值，因为不是同一个对象了。

<template><div class="person"><h1>情况二：监视【ref】定义的【对象类型】数据</h1><h2>姓名：{{ person.name }}</h2><h2>年龄：{{ person.age }}</h2><button @click="changeName">修改名字</button><button @click="changeAge">修改年龄</button><button @click="changePerson">修改整个人</button></div>
</template><script lang="ts" setup name="Person">import {ref,watch} from 'vue'// 数据let person = ref({name:'张三',age:18})// 方法function changeName(){person.value.name += '~'}function changeAge(){person.value.age += 1}function changePerson(){person.value = {name:'李四',age:90}}/* 监视，情况一：监视【ref】定义的【对象类型】数据，监视的是对象的地址值，若想监视对象内部属性的变化，需要手动开启深度监视watch的第一个参数是：被监视的数据watch的第二个参数是：监视的回调watch的第三个参数是：配置对象（deep、immediate等等.....） */watch(person,(newValue,oldValue)=>{console.log('person变化了',newValue,oldValue)},{deep:true})</script>

* 情况三

监视reactive定义的【对象类型】数据，且默认开启了深度监视。

<template><div class="person"><h1>情况三：监视【reactive】定义的【对象类型】数据</h1><h2>姓名：{{ person.name }}</h2><h2>年龄：{{ person.age }}</h2><button @click="changeName">修改名字</button><button @click="changeAge">修改年龄</button><button @click="changePerson">修改整个人</button><hr><h2>测试：{{obj.a.b.c}}</h2><button @click="test">修改obj.a.b.c</button></div>
</template><script lang="ts" setup name="Person">import {reactive,watch} from 'vue'// 数据let person = reactive({name:'张三',age:18})let obj = reactive({a:{b:{c:666}}})// 方法function changeName(){person.name += '~'}function changeAge(){person.age += 1}function changePerson(){Object.assign(person,{name:'李四',age:80})}function test(){obj.a.b.c = 888}// 监视，情况三：监视【reactive】定义的【对象类型】数据，且默认是开启深度监视的watch(person,(newValue,oldValue)=>{console.log('person变化了',newValue,oldValue)})watch(obj,(newValue,oldValue)=>{console.log('Obj变化了',newValue,oldValue)})
</script>

* 情况四

监视ref或reactive定义的【对象类型】数据中的某个属性，注意点如下：

  1. 若该属性值不是【对象类型】，需要写成函数形式。
  2. 若该属性值是依然是【对象类型】，可直接编，也可写成函数，建议写成函数。

结论：监视的要是对象里的属性，那么最好写函数式，注意点：若是对象监视的是地址值，需要关注对象内部，需要手动开启深度监视。

<template><div class="person"><h1>情况四：监视【ref】或【reactive】定义的【对象类型】数据中的某个属性</h1><h2>姓名：{{ person.name }}</h2><h2>年龄：{{ person.age }}</h2><h2>汽车：{{ person.car.c1 }}、{{ person.car.c2 }}</h2><button @click="changeName">修改名字</button><button @click="changeAge">修改年龄</button><button @click="changeC1">修改第一台车</button><button @click="changeC2">修改第二台车</button><button @click="changeCar">修改整个车</button></div>
</template><script lang="ts" setup name="Person">import {reactive,watch} from 'vue'// 数据let person = reactive({name:'张三',age:18,car:{c1:'奔驰',c2:'宝马'}})// 方法function changeName(){person.name += '~'}function changeAge(){person.age += 1}function changeC1(){person.car.c1 = '奥迪'}function changeC2(){person.car.c2 = '大众'}function changeCar(){person.car = {c1:'雅迪',c2:'爱玛'}}// 监视，情况四：监视响应式对象中的某个属性，且该属性是基本类型的，要写成函数式/* watch(()=> person.name,(newValue,oldValue)=>{console.log('person.name变化了',newValue,oldValue)}) */// 监视，情况四：监视响应式对象中的某个属性，且该属性是对象类型的，可以直接写，也能写函数，更推荐写函数watch(()=>person.car,(newValue,oldValue)=>{console.log('person.car变化了',newValue,oldValue)},{deep:true})
</script>

* 情况五

监视上述的多个数据

<script lang="ts" setup name="Person">import {reactive,watch} from 'vue'// 数据let person = reactive({name:'张三',age:18,car:{c1:'奔驰',c2:'宝马'}})// 监视，情况五：监视上述的多个数据watch([()=>person.name,person.car],(newValue,oldValue)=>{console.log('person.car变化了',newValue,oldValue)},{deep:true})</script>

8，watchEffect

  • 官网：立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行该函数。

  • watch对比watchEffect

    1. 都能监听响应式数据的变化，不同的是监听数据变化的方式不同

    2. watch：要明确指出监视的数据

    3. watchEffect：不用明确指出监视的数据（函数中用到哪些属性，那就监视哪些属性）。

  • 示例代码：

<template><div class="person"><h1>需求：水温达到50℃，或水位达到20cm，则联系服务器</h1><h2 id="demo">水温：{{temp}}</h2><h2>水位：{{height}}</h2><button @click="changePrice">水温+1</button><button @click="changeSum">水位+10</button></div>
</template><script lang="ts" setup name="Person">import {ref,watch,watchEffect} from 'vue'// 数据let temp = ref(0)let height = ref(0)// 方法function changePrice(){temp.value += 10}function changeSum(){height.value += 1}// 用watch实现，需要明确的指出要监视：temp、heightwatch([temp,height],(value)=>{// 从value中获取最新的temp值、height值const [newTemp,newHeight] = value// 室温达到50℃，或水位达到20cm，立刻联系服务器if(newTemp >= 50 || newHeight >= 20){console.log('联系服务器')}})// 用watchEffect实现，不用const stopWtach = watchEffect(()=>{// 室温达到50℃，或水位达到20cm，立刻联系服务器if(temp.value >= 50 || height.value >= 20){console.log(document.getElementById('demo')?.innerText)console.log('联系服务器')}// 水温达到100，或水位达到50，取消监视if(temp.value === 100 || height.value === 50){console.log('清理了')stopWtach()}})
</script>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/691638.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

新版本cesium的注意点

新版本cesium的注意点

之前基于1.99版本写了一套插件&#xff0c;最近想替换成目前的新版本&#xff08;114&#xff09;&#xff0c;发现有很多写法都不能用了&#xff0c;这里做一下记录。 100版本发布了cesium/engine&#xff0c;cesium/widgets&#xff0c;引用方式上就会有些变化&#xff1b;1…
阅读更多...
conda 所有的命令及其讲解

conda 所有的命令及其讲解

Conda 是一个开源的包管理器和环境管理器&#xff0c;可以用于安装、运行和升级跨平台的软件包和环境。Conda 很流行于数据科学、机器学习、科学计算等领域&#xff0c;因为它能够快速地安装、管理和部署软件包和环境。以下是 Conda 的一些主要命令及其简要说明&#xff1a; 环…
阅读更多...
【Linux】git操作 - gitee

【Linux】git操作 - gitee

1.使用 git 命令行 安装 git yum install git 2.使用gitee 注册账户 工作台 - Gitee.com 进入gitee&#xff0c;根据提示注册并登录 新建仓库 仓库名称仓库简介初始换仓库 3.Linux-git操作 进入仓库&#xff0c;选择“克隆/下载” 复制下面的两行命令进行git配置 然后将仓库clo…
阅读更多...
React 中的类组件

React 中的类组件

组件分为内置原生组件和自定义组件 内置组件p h1 span type字符串自定义组件 类型是一个 函数 ,类组件的父类Component的原型上有一个属性 isReactComponent{} 自定义组件的名称必须是大写字母开头 自定定组件的返回值有且只能一个根元素 import React from ./react; import …
阅读更多...
教师专业发展的五个阶段

教师专业发展的五个阶段

每当人们谈论教师&#xff0c;总会联想到“传道授业解惑”的崇高形象。但教师的专业成长&#xff0c;绝非一蹴而就。今天&#xff0c;就让我们一起探秘教师专业发展的五个阶段&#xff0c;看看一位普通教师是如何历练成为教育行家的。 阶段一&#xff1a;新手摸索期 初入教育行…
阅读更多...
走进科学系列之遭遇鬼打墙的OUTLOOK

走进科学系列之遭遇鬼打墙的OUTLOOK

网管小贾 / sysadm.cc 正值春运&#xff0c;车站里熙熙攘攘、人头攒动。 鲍勃和约瑟夫正在候车室&#xff0c;等待检票。 “嗨&#xff01;约瑟夫&#xff01;快来看看&#xff0c;我的电脑出问题了&#xff01;” “得了吧&#xff0c;马上就要检票上车了&#xff0c;你就不…
阅读更多...
IP显示地址与实际地址不一致，你知道为什么吗？

IP显示地址与实际地址不一致，你知道为什么吗？

在数字化时代&#xff0c;IP地址作为网络世界中的“身份证”&#xff0c;其重要性不言而喻。然而&#xff0c;有时我们可能会遇到这样一个现象&#xff1a;IP显示地址与实际地址不一致。这究竟是怎么一回事呢&#xff1f;虎观代理小二二将带您一起探究这一现象背后的原因。 1、…
阅读更多...
nacos用作注册中心

nacos用作注册中心

nacos除了用作配置中心&#xff0c;即可以将配置信息由配置文件转移到nacos上&#xff0c;更便于修改和维护外&#xff0c;更重要的&#xff0c;是用作微服务的注册中心。没有这类中间件&#xff0c;微服务玩不转。 微服务架构也者&#xff0c;就是有好多好多的微服务&#xf…
阅读更多...
调用接口时不时出现 Error: socket hang up

调用接口时不时出现 Error: socket hang up

项目场景&#xff1a; 提示&#xff1a;这里简述项目相关背景&#xff1a; 今天采用golang创建了一个http服务&#xff0c;准备对若干接口进行测试。 问题描述 提示&#xff1a;这里描述项目中遇到的问题&#xff1a; 在测试第一个接口时&#xff0c;发现采用postman调用接口…
阅读更多...
Ansible yum模块 主要用于软件安装

Ansible yum模块 主要用于软件安装

目录 选项 实例 安装一个tree实例卸载一个 tree 选项 name　　 #所安装的包的名称 state　　#present—>安装&#xff0c; latest—>安装最新的, absent—> 卸载软件。 update_cache　　#强制更新yum的缓存 conf_file　　#指定远程yum安装时所依赖的配置文件&…
阅读更多...
5G车载路由器引领无人驾驶车联网应用

5G车载路由器引领无人驾驶车联网应用

随着无人驾驶技术的不断发展&#xff0c;车联网正逐渐成为实现智能交通的重要组成部分。5G车载路由器将在车联网的应用中起到至关重要的作用&#xff0c;它能够满足无人驾驶应用的低时延、高速率和实时控制等需求&#xff0c;进一步推动无人驾驶车联网技术。 5G路由器具备低时延…
阅读更多...
CF1172A Nauuo and Cards 题解 贪心

CF1172A Nauuo and Cards 题解 贪心

Nauuo and Cards 传送门 Nauuo is a girl who loves playing cards. One day she was playing cards but found that the cards were mixed with some empty ones. There are n n n cards numbered from 1 1 1 to n n n, and they were mixed with another n n n empty…
阅读更多...
从 AGP 4.1.2 到 7.5.1——XmlParser、GPathResult、QName 过时

从 AGP 4.1.2 到 7.5.1——XmlParser、GPathResult、QName 过时

新年首发&#xff0c; 去年的问题&#xff0c;今年解决~ 问题 & 排查 1: Task failed with an exception. ----------- * What went wrong: Execution failed for task :app:processCommonReleaseManifest. > org.xml.sax.SAXParseException; lineNumber: 1; columnNu…
阅读更多...
【申请体验Sora】OpenAI Red Teaming Network application

【申请体验Sora】OpenAI Red Teaming Network application

网址&#xff1a;https://openai.com/form/red-teaming-network 使用Gmail &#xff0c; 国家选美国 两个问题&#xff1a; Why are you interested in joining the OpenAI Red Teaming Network? I’m eager to experience the powerful allure of Sora, which I believe wi…
阅读更多...
postgresql 文件结构（一） 数据库、表对应的文件

postgresql 文件结构（一） 数据库、表对应的文件

1、问题 甲方要求提供数据库数据量大小&#xff0c;由于各个业务数据库共用一个postgres&#xff0c;因此想把每个数据库占用的空间都统计一下。 2、查找物理存储文件目录 如下图所示&#xff0c;可以查询表、库的物理存储文件名称 -- 查询表对应的文件 select oid,relname…
阅读更多...
leetcode 01背包问题

leetcode 01背包问题

典型的01背包问题可以暴力求解&#xff0c;直接将所有可能全部遍历然后挑选符合条件的即可&#xff0c;但这样时间复杂度过高&#xff0c;有2的n次方。 所以我们在这里采用动态规划的方式来做&#xff0c;并且&#xff0c;我们可以采用二维数组或者一维数组来做。 二维数组&a…
阅读更多...
每天一个数据分析题（一百五十九）

每天一个数据分析题（一百五十九）

主成分分析&#xff08;PCA&#xff09;不适宜单独用于哪种情况&#xff1f; A. 员工绩效的评估和排名 B. 描述产品情况&#xff0c;如子公司的业务发展状况 C. 消除数据分析中的共线性问题 D. PCA可以作为异常识别的算法使用 题目来源于CDA模拟题库 点击此处获取答案
阅读更多...
PMP每日十题-2024年2月20日

PMP每日十题-2024年2月20日

项目经理发现&#xff0c;一些团队成员不清楚其职责和活动&#xff0c;哪一项工具或技术能够帮助项目经理明确定义这些职责和活动&#xff1f; A、组织图 B、工作分解结构 C、执行&#xff0c;负责&#xff0c;咨询和知情矩阵&#xff08;RACI&#xff09; D、项目成员派工单 答…
阅读更多...
供水管网管道爆管事故发生原因及控制措施

供水管网管道爆管事故发生原因及控制措施

经济的快速发展及城镇化的不断推进使得我国的城镇数量及规模都在不断地扩大。供水系统是城镇基础设施中 的重要的一环。现今在我国各城市中已经建立了相对完善的城市供水管网体系。但是在供水管网运行过程中爆管问题时 有发生&#xff0c;从而对城市用水的正常供应以及民众的正…
阅读更多...
如何在 Angular 中使用 ng-container 元素

如何在 Angular 中使用 ng-container 元素

简介 ng-container 是 Angular 2 中可用的一个元素&#xff0c;可以作为结构指令的宿主。 在本文中&#xff0c;您将探讨可以使用 ng-container 解决的场景。 先决条件 如果您想跟着本文学习&#xff0c;您需要&#xff1a; 熟悉 DOM 的结构。要了解更多&#xff0c;请查看…
阅读更多...
最新文章

Copyright @ 2022~2023