当前位置： 首页 > news >正文

Vue实例中的其他属性【5】

news 2025/8/18 16:16:51

目录

  • 1.计算属性：
      • 1.概述：
      • 2.语法特点：
      • 3.案例：
        • 案例1：
        • 案例2：
        • 案例3：
      • 4.总结：
      • 5.get函数什么时候执行？
      • 6.注意:
  • 2.监视属性：
      • 1.概述：
      • 2.用法：
        • 1.监视单个属性值：
          • 写法1：在Vue实例对象时配置：
          • 写法2：Vue实例对象完成后，配置监视属性
          • 测试结果展示：
        • 2.深度监视：
          • 1.监视对象的一个属性：
          • 2.监视整个对象：
      • 3.监视属性的简写：只适用于单个属性等简单逻辑的监视
      • 4.总结：

1.计算属性：

1.概述：

   简单来说，计算属性就是通过Vue实例中data中已存在的属性，经过逻辑运算得到一个新属性；

2.语法特点：

  • 1.定义Vue实例vm
  • 2.在vm中定义el和data属性
  • 3.在data属性中定义相关属性（数据）
  • 4.在vm中定义computed计算属性
  • 5.在计算属性中定义函数，执行对data属性中定义相关属性的逻辑运算
  • 6.如果需要对计算属性的值进行读写操作，还需要在计算属性中定义的函数中定义get/set方法
  • 7.并且通过set方法修改计算数值的值时，必须要引起参与计算属性的变量的改变
  • 8.因为get方法具有缓存机制，只有当数据改变后才会再次执行，如果通过set修改计算属性的值时，不改变参与计算的值，那么get方法就不会执行，更新后的数据也就不会同步更新到页面上了

3.案例：

案例1：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!--2.准备一个容器-->
<div id="root"><h2>全名：{{fullName}}</h2>姓:<input type="text" v-model="firstName"/><br/>名:<input type="text" v-model="laseName"/><br/>全名:<input type="text" v-model="fullName"/>
</div>
<!--1.引入Vue js 文件-->
<script src="vue/vue.js"></script>
<script type="text/javascript">//3.创建Vue对象let vm = new Vue({data() {return {firstName: '张',laseName: "三"}},computed: {//计算属性fullName: {get() {//有缓存 只执行一次 如果改变了  需要二次执行console.log("执行了fullName计算")return this.firstName + "-" + this.laseName;},set(value) {console.log("改变计算属性:", value)//在修改是 要引起 参与计算属性的变量的改变let arr = value.split("-");this.firstName = arr[0];this.laseName = arr[1];}}}).$mount("#root");
</script>
</body>
</html>

说明：在上面案例中，我们给Vue实例添加了一个计算属性，通过实例中data对象的firstname属性和lastname属性计算获取fullname，并将计算属性fullname展示到了页面上。由于我们在计算属性的函数中添加了get/set方法，并在set方法中修改fullname的值后，将新的值赋值给了实例中data对象的firstname属性和lastname属性，所以可以实现浏览器页面上改变fullname的值时，firstname属性和lastname属性以及最上面的fullname的值的同步变化 ，如下图所示；

案例2：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!--2.准备一个容器-->
<div id="root"><h2>全名：{{fullName}}</h2>姓:<input type="text" v-model="firstName"/><br/>名:<input type="text" v-model="laseName"/><br/>全名:<input type="text" v-model="fullName"/>
</div>
<!--1.引入Vue js 文件-->
<script src="vue/vue.js"></script>
<script type="text/javascript">//3.创建Vue对象let vm = new Vue({data() {return {firstName: '张',laseName: "三"}},computed: {//计算属性fullName: {get() {//有缓存 只执行一次 如果改变了  需要二次执行console.log("执行了fullName计算")return this.firstName + "-" + this.laseName;},set(value) {console.log("改变计算属性:", value)}}}).$mount("#root");
</script>
</body>
</html>

在案例2中，我们在set方法中只改变fullname的值后，而没有将新的值赋值给了实例中data对象的firstname属性和lastname属性，那么在页面中对应的属性就不会同步更新，因为对于get方法来说，数据未发生改变，就不会再执行了，测试结果如下图所示；

案例3：
 <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!--2.准备一个容器-->
<div id="root"><h2>全名：{{fullName}}</h2>姓:<input type="text" v-model="firstName"/><br/>名:<input type="text" v-model="laseName"/><br/>全名:<input type="text" v-model="fullName"/>
</div>
<!--1.引入Vue js 文件-->
<script src="vue/vue.js"></script>
<script type="text/javascript">//3.创建Vue对象let vm = new Vue({data() {return {firstName: '张',laseName: "三"}},computed: {//简写  只读fullName() {//有缓存 只执行一次 如果改变了  需要二次执行console.log("执行了fullName计算")return this.firstName + "-" + this.laseName;}}}).$mount("#root");
</script>
</body>
</html>

说明：如果对于计算属性的结果只有读取操作，那么就可以简写计算属性中的函数了，只需在计算属性的函数中定义执行逻辑即可，由于缓存机制，只要该值不发生改变，就可以正常展示到页面上；因为没有set方法，如果此时在页面上修改计算属性的值，就会报错。

4.总结：

  • 要用的属性不存在，需要通过已有的属性计算的来
  • 底层借助了 Object.defineproperty() 方法 提供了set get

5.get函数什么时候执行？

  1. 在初次读取时执行一次
  2. 当依赖属性改变时在次执行

6.注意:

  1. 计算属性最终会出现在vm上 可以直接调用
  2. 如果计算属性要被修改 ，就必须写set函数，还要引起依赖属性的改变
  3. 如果不考虑 修改 可以简写：

2.监视属性：

1.概述：

<font style="color:rgba(0, 0, 0, 0.85);">在 Vue 中，监视属性（</font>`<font style="color:rgba(0, 0, 0, 0.85);">watch</font>`<font style="color:rgba(0, 0, 0, 0.85);">）用于监听一个特定的数据属性，并在该属性发生变化时执行相应的回调函数。</font>

2.用法：

1.监视单个属性值：
写法1：在Vue实例对象时配置：
 <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!--2.准备一个容器-->
<div id="root">
<!--通过插值表达式结合计算属性展示天气信息    --><h2>今天的天气：{{info}}</h2>
<!--绑定单击鼠标事件切换天气    --><button @click="changeWeather">点击切换天气</button>
</div>
<!--1.引入Vue js 文件-->
<script src="vue/vue.js"></script>
<script type="text/javascript">//3.创建Vue对象let vm = new Vue({data() {return {isHot: true}},//通过计算属性的函数展示天气信息computed: {info() {return this.isHot ? '炎热' : '凉爽';}},//通过单击鼠标事件的回调函数改变天气信息methods: {changeWeather() {this.isHot = !this.isHot;}},//监视isHot属性，当属性的值发生改变时，将改变前和改变后的值输出到控制台watch: {//监视属性isHot: {//在初始化时监视immediate:true,handler(newValue, oldValue) {console.log('新的数据：', newValue);console.log('旧的数据：', oldValue);}}}})vm.$mount("#root");
</script>
</body>
</html>

​

写法2：Vue实例对象完成后，配置监视属性
 <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!--2.准备一个容器-->
<div id="root">
<!--通过插值表达式结合计算属性展示天气信息    --><h2>今天的天气：{{info}}</h2>
<!--绑定单击鼠标事件切换天气    --><button @click="changeWeather">点击切换天气</button>
</div>
<!--1.引入Vue js 文件-->
<script src="vue/vue.js"></script>
<script type="text/javascript">//3.创建Vue对象let vm = new Vue({data() {return {isHot: true}},//通过计算属性的函数展示天气信息computed: {info() {return this.isHot ? '炎热' : '凉爽';}},//通过单击鼠标事件的回调函数改变天气信息methods: {changeWeather() {this.isHot = !this.isHot;}}})//第二种写法  创建实例后 配置vm.$watch('isHot', {//在初始化时监视immediate: true,handler(newValue, oldValue) {console.log('新的数据：', newValue);console.log('旧的数据：', oldValue);}})vm.$mount("#root");
</script>
</body>
</html>

说明：配置监视属性必须要在Vum实例绑定div容器之前；

测试结果展示：

因为我们在监视属性中配置了属性初始化时就开始监视，所以页面刚加载出来时，控制台就输出了相关信息，由于此时数据未改变，所以旧的值为unfined，表示未定义；

此时当我们单击按钮时，就会再次触发事件，引起监视的属性的改变，进而会执行监视属性中的逻辑

2.深度监视：
1.监视对象的一个属性：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!--2.准备一个容器-->
<div id="root">
<!--通过插值表达式获取data中numbers的属性值    --><h3> a：的值是{{numbers.a}} </h3><h3> b：的值是{{numbers.b}} </h3>
<!--绑定单击鼠标事件，执行numbers的属性++操作(Vue 会自动将表达式执行的结果作为回调函数来处理,属于回调函数的简写)     --><button @click="numbers.a++">点击a++</button><button @click="numbers.b++">点击b++</button>
</div>
<!--1.引入Vue js 文件-->
<script src="vue/vue.js"></script>
<script type="text/javascript">//3.创建Vue对象let vm = new Vue({data() {return {numbers: {a: 1,b: 2}}},watch: {//单独的监视对象的一个属性'numbers.b': {handler(newValue, oldValue) {console.log(newValue,oldValue)}}}})vm.$mount("#root");
</script>
</body>
</html>

在上面案例中，我们对data属性中的numbers对象的b属性进行监视，当点击对应按钮时触发事件，改变了b属性的值，此时就会在监视属性中执行相关逻辑，控制台打印新旧数据；

2.监视整个对象：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!--2.准备一个容器-->
<div id="root">
<!--通过插值表达式获取data中numbers的属性值    --><h3> a：的值是{{numbers.a}} </h3><h3> b：的值是{{numbers.b}} </h3>
<!--绑定单击鼠标事件，执行numbers的属性++操作(Vue 会自动将表达式执行的结果作为回调函数来处理,属于回调函数的简写)     --><button @click="numbers.a++">点击a++</button><button @click="numbers.b++">点击b++</button>
</div>
<!--1.引入Vue js 文件-->
<script src="vue/vue.js"></script>
<script type="text/javascript">//3.创建Vue对象let vm = new Vue({data() {return {numbers: {a: 1,b: 2}}},watch: {numbers: {//启用深度监视deep: true,handler(newValue,oldValue) {console.log(newValue,oldValue)}}}})vm.$mount("#root");
</script>
</body>
</html>

在上面案例中，我们对data属性中的numbers对象的b属性进行监视，当点击对应按钮时触发事件，改变了b属性的值，此时就会在监视属性中执行相关逻辑，控制台打印新旧数据。但实际上对于numbers对象而言，虽然b属性的值发生了改变，但numbers对象本身并没发生变化，因此新旧数值实际上是相同的；

3.监视属性的简写：只适用于单个属性等简单逻辑的监视

对于监视单个属性的简单逻辑，可以对监视属性的写法进行简化，示例代码如下：

  <!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<!--2.准备一个容器-->
<div id="root"><h2>今天的天气：{{info}}</h2><button @click="changeWeather">点击切换天气</button>
</div>
<!--1.引入Vue js 文件-->
<script src="vue/vue.js"></script>
<script type="text/javascript">//3.创建Vue对象let vm = new Vue({data() {return {isHot: true}},computed: {info() {return this.isHot ? '炎热' : '凉爽';}},methods: {changeWeather() {this.isHot = !this.isHot;}},watch: {//监视属性'isHot'(newValue, oldValue) {console.log('新的数据：', newValue);console.log('旧的数据：', oldValue);}}})vm.$mount("#root");
</script>
</body>
</html>

注意：此种简写方式只适用于监视单个属性的简单逻辑，对于深度监视这种复杂逻辑则不适用。因为简写代码中监视属性中不再是一个对象，而是一个函数，在此函数中无法进行深度监视的配置；

4.总结：

  1. 1.当被监视的属性改变时，回调函数会自动执行。
  2. 2.监视的属性是必须存在
  3. 3.监视有两种写法
  •   在创建Vue实例时 配置 watch

  •   在创建Vue实例之后 配置监视
http://www.dtcms.com/a/334714.html

相关文章：

  • 安全审计-iptales防火墙设置
  • Java硬件融合实战：Vector API+ROCm加速大模型推理优化解锁AMD GPU异构算力，实现LLM本地化部署
  • Mysql常见的优化方法
  • OpenShift 4.19安装中的变化
  • 失落城堡2 送修改器（Lost Castle 2）免安装中文版
  • 安卓11 12系统修改定制化_____修改系统默认域名解析规则 实现屏蔽广告 屏蔽应用更新等功能
  • JavaScript手录17-原型
  • Java后台生成多个Excel并用Zip打包下载
  • 《AI 与数据质量的深度碰撞：颠覆传统治理模式的变革》文章提纲
  • 【C++语法】手写堆与有关堆的容器/函数
  • CMake进阶: 配置文件(configure_file)
  • 数据结构初阶（17）排序算法——非比较排序（计数排序·动图演示）、排序算法总结
  • 打卡day40
  • 在本地部署Qwen大语言模型全过程总结
  • Go语言panic机制详解
  • goland在windows上编译突然变慢
  • Spring Framework：Java 开发的基石与 Spring 生态的起点
  • [go] 桥接模式
  • Git代码库安装与管理常用操作
  • 同创物流学习记录1
  • 论文学习24：Boundary-Sensitive Segmentation of SmallLiver Lesions
  • 拒绝造轮子（C#篇）ZLG CAN卡驱动封装应用
  • 日语学习-日语知识点小记-进阶-JLPT-N1阶段蓝宝书，共120语法（２）：１１-２０语法
  • 【星闪】Hi2821 | SysTick系统定时器
  • 《Python学习之字典（二）：高级操作与实战技巧》
  • Python训练Day45
  • 无痕HOOK 检测及对抗
  • 嵌入式硬件篇---BuckBoost电路
  • Windows 命令行：ping 命令
  • 中级统计师-会计学基础知识-第三章 会计凭证与会计账簿