• Vue 监听属性

    本章节，我们将为大家介绍 Vue 监听属性 watch，我们可以通过 watch 来响应数据的变化。

    以下实例通过使用 watch 实现计数器：

    1. <div id = "app">
    2.     <p style = "font-size:25px;">计数器: {{ counter }}p>
    3.     <button @click = "counter++" style = "font-size:25px;">点我button>
    4. div>
    5.     
    6. <script>
    7. const app = {
    8.   data() {
    9.     return {
    10.       counter: 1
    11.     }
    12.   }
    13. }
    14. vm = Vue.createApp(app).mount('#app')
    15. vm.$watch('counter', function(nval, oval) {
    16.     alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
    17. });
    18. script>

    以下实例进行千米与米之间的换算：

    1. <head>
    2. <meta charset="utf-8">
    3. <title>Vue 测试实例title>
    4. <script src="https://unpkg.com/vue@next">script>
    5. head>
    6. <body>
    7. <div id = "app">
    8.     千米 : <input type = "text" v-model = "kilometers">
    9.     米 : <input type = "text" v-model = "meters">
    10. div>
    11. <p id="info">p>    
    12. <script>
    13. const app = {
    14.   data() {
    15.     return {
    16.       kilometers : 0,
    17.       meters:0
    18.     }
    19.   },
    20.   watch : {
    21.       kilometers:function(val) {
    22.           this.kilometers = val;
    23.           this.meters = this.kilometers * 1000
    24.       },
    25.       meters : function (val) {
    26.           this.kilometers = val/ 1000;
    27.           this.meters = val;
    28.       }
    29.   }
    30. }
    31. vm = Vue.createApp(app).mount('#app')
    32. vm.$watch('kilometers', function (newValue, oldValue) {
    33.     // 这个回调将在 vm.kilometers 改变后调用
    34.     document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;
    35. })
    36. script>

    以上代码中我们创建了两个输入框，data属性中，kilometers 和 meters 初始值都为0。watch 对象创建了 data 对象的两个监控方法：kilometers 和 meters。

    使用场景

    watch(异步场景)，computed(数据联动)watch可以在所监听的数据后面直接加字符串形式的方法名

    1. html>
    2.     <html lang="en">
    3.     <head>
    4.         <meta charset="UTF-8">
    5.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.         <meta http-equiv="X-UA-Compatible" content="ie=edge">
    7.         <title>Vue计算属性/侦听器/方法比较title>
    8.         <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js">script>
    9.     head>
    10.     <body>
    11.         <div id="app">
    12.             <h1>计算属性：computedh1>
    13.             {{fullName}}
    14.             <h1>方法：methodsh1>
    15.             {{fullName2()}}
    16.             <h1>侦听器：watchh1>
    17.             {{watchFullName}}
    18.             <h1>年龄h1>
    19.             {{age}}
    20.         div>
    21.         <script>
    22.             var other = 'This is other';
    23.             var app = new Vue({
    24.                 el:"#app",
    25.                 data:{
    26.                 firstName:"zhang",
    27.                 lastName:"san",
    28.                 watchFullName:"zhangsan",
    29.                 age:18,
    30.                 },
    31.                 watch: {
    32.                     firstName:function(newFirstName, oldFirstName){
    33.                         console.log("firstName触发了watch,newFirstName="+newFirstName+",oldFirstName="+oldFirstName)
    34.                         this.watchFullName = this.firstName+this.lastName+","+other
    35.                     },
    36.                     lastName:function(newLastName, oldLastName){
    37.                         console.log("lastName触发了watch,newLastName="+newLastName+",oldLastName="+oldLastName)
    38.                         this.watchFullName = this.firstName+this.lastName+","+other
    39.                     },
    40.                     watchFullName:"change"
    41.  
    42.                 },
    43.                 computed: {
    44.                     fullName:function(){
    45.                     console.log("调用了fullName,计算了一次属性")
    46.                     return this.firstName+this.lastName+","+other;
    47.                     }
    48.                 },
    49.                 methods: {
    50.                     fullName2:function(){
    51.                         console.log("调用了fullName,执行了一次方法")
    52.                         fullName2 = this.firstName+this.lastName+","+other;
    53.                         return fullName2;
    54.                     },
    55.                     change(){
    56.                         console.log("调用了change,触发了watch")
    57.                         return this.watchFullName='111'
    58.                     }
    59.                 }
    60.             });
    61.         script>
    62.     body>
    63.     html>

    handler方法就相当于普通侦听器触发的事件，从结果可以看到，组件初始化的时候，侦听器并没有handler方法，所以fullName是没有值的。

    当修改以上代码，加上immediate:true,immediate:true代表watch里面声明了之后会立马执行handler里面的函数。执行相应的逻辑。组件初始化的时候，侦听器(immediate)触发handler方法

    1. html>
    2.     <html lang="en">
    3.     <head>
    4.         <meta charset="UTF-8">
    5.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.         <meta http-equiv="X-UA-Compatible" content="ie=edge">
    7.         <title>Vue计算属性/侦听器/方法比较title>
    8.         <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js">script>
    9.     head>
    10.     <body>
    11.         <div id="app">
    12.           <div>
    13.             <p>FullName: {{person.fullname}}p>
    14.             <p>FirstName: <input type="text" v-model="person.firstname">p>
    15.           div>
    16.         div>
    17.         <script>
    18.             var other = 'This is other';
    19.             var app = new Vue({
    20.               el: '#app',
    21.                data(){
    22.                 return {
    23.                     person: {
    24.                         firstname: 'Menghui',
    25.                         lastname: 'Jin',
    26.                         fullname: ''
    27.                     }
    28.                 }
    29.               },
    30.              watch: {
    31.               person: {
    32.                   handler(n,o){
    33.                       this.person.fullname = n.firstname + '' + this.person.lastname;
    34.                   },
    35.                    immediate: true,  //刷新加载 立马触发一次handler
    36.                   deep: true  // 可以深度检测到 person 对象的属性值的变化
    37.               }
    38.               }
    39.             })
    40.         script>
    41.     body>
    42.     html>

    当在输入框中输入数据时，可以发现fullName的值并没有随之改变 这是因为vue无法检测到对象内部属性值的变化，比如person。firstname的变化

    所以此时 需要用到vue的深度监听(deep)

    此时加上代码 deep:true

    可以发现 每次输入框数据变化 fullname 随之改变

    上面的可以发现handler监听的新值和老值是一样的 这是由vue2.0的坑 由于同源导致的 可以用computed 来修改

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6.  
    7. 	head>
    8. 	<body>
    9. 		<div id="app">
    10.              <p>FullName: {{person.fullname}}p>
    11.              <p>FirstName: <input type="text" v-model="person.firstname">p>
    12. 		div>
    13. 		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js">script>
    14. 		<script>
    15. 			const app = new Vue({
    16. 				el: "#app",
    17. 				data() {
    18. 					return {
    19. 						person: {
    20. 							firstname: 'Menghui',
    21. 							lastname: 'Jin',
    22. 							fullname: ''
    23. 						}
    24. 					}
    25. 				},
    26. 				methods: {
    27.  
    28. 				},
    29. 				computed: {
    30.                    person2(){
    31. 					    return JSON.parse(JSON.stringify(this.person));
    32. 				   }//解决深度监听新老值同源问题
    33. 				},
    34. 				watch:{
    35. 				   person2:{
    36. 					     handler(n,o){
    37. 							 console.log(this.person);
    38. 							 console.log(n.firstname);
    39. 					                 console.log(o.firstname);
    40. 							
    41. 							 /* this.person.fullname = this.person.firstname + this.person.lastname */
    42. 						 },
    43. 						/* immediate: true, */
    44. 						 deep: true  // 可以深度检测到 person 对象的属性值的变化
    45. 				   }
    46. 				}
    47. 			})
    48. 		script>
    49. 	body>
    50. html>

  • 相关阅读:
    C/C++标准库梳理
    VS2022+QT5.14.2开发VS QT Tool的使用
    探秘三维地形瓦片服务：流畅展现全球地貌的秘密揭秘
    上海亚商投顾：沪指低开低走 抖音概念股逆势爆发
    第31讲：MySQL事务的并发问题以及事务的隔离级别
    c++封装webrtc sdk(二)：在sdk端实现webrtc视频渲染
    【Web3 系列开发教程——创建你的第一个 NFT（5）】使用 Ethers.js 铸造 NFT | 测试用例
    安全可信丨两个项目新入选可信边缘计算推进计划！
    软件测试中的测试左移与测试右移
    多线程入门
  • 原文地址：https://blog.csdn.net/qq_56515781/article/details/126047881