vue watch用法

vue中wacth的功能是用来监听数据的变化，但数据发生变化时，可以自己写一些业务逻辑

自我理解可以分为两种写法

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <script src="vue.js"></script>
 7     </head>
 8     <body>
 9         <div id="app">
10             <!--v-model:双向数据绑定 作用于表单-->
11             <input type="text" v-model="msg"/>
12             <p>{{msg}}</p>            
13         </div>
14         <script>
15             new Vue({
16                 el:'#app',
17                 data:{
18                     msg:'hello world',
19                 },
20                 watch:{
21                     msg:{  //这里的msg指的就是data里面的msg
22                         handler(n,o){    //n：当前msg的值，o：msg变化之前的值
23                             console.log(n,o)//根据数据变化，写业务逻辑
24                         },
25                         immediate: true,//设置是否一开始就对数据进行监听   也就是是否立即执行handler函数，false为不执行   
26                         deep:true//普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听。
27                     }
28                 },
29                 mounted(){                     
30                 }
31             })
32         </script>
33     </body>
34 </html>

 简写形式：一般不对数据进行深度监听可以使用该形式

 1 <!DOCTYPE html>
 2 <html>
 3 
 4     <head>
 5         <meta charset="UTF-8">
 6         <title></title>
 7         <script src="vue.js"></script>
 8     </head>
 9 
10     <body>
11         <div id="app">
12             <!--v-model:双向数据绑定 作用于表单-->
13             <input type="text" v-model="msg" />
14             <p>{{msg}}</p>
15         </div>
16         <script>
17             new Vue({
18                 el: '#app',
19                 data: {
20                     msg: 'hello world',
21                 },
22                 watch: {
23                     msg(newName, oldName) {
24                         //根据数据变化，写业务逻辑
25                     }
26                 },
27                 mounted() {}
28             })
29         </script>
30     </body>
31 
32 </html>

 

posted @ 2019-03-08 10:24  北极星的孤单  阅读(478)  评论(0)    收藏  举报