methods,计算属性和监视

methods,computed,watch

methods
计算属性（computed）
watch

methods

<body>
<div id="app">{{info()}}</div>
<script>
   let obj={
		name:'wzm',
		age:22
	}
	const vm = new Vue({
		el:'#app',
		data:obj,
		methods:{
			info(){
			return this.name+this.age
			}
	}

})
</script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

计算属性（computed）

<body>
<div id="app">{{info}}</div>
<script>
   let obj={
		name:'wzm',
		age:22
	}
	const vm = new Vue({
		el:'#app',
		data:obj,
		computed:{
		     //精简
			info(){
			return this.name+this.age
			},  
				
			//完整	
			 // info:{
                //     get(){
                //         return this.name+'今年'+this.age
                //     },
                //     set(value){
                //         this.name=value;
                //         this.age=value;
                //     }
                // }
			
	}

})
</script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

watch

<body>
    <div id="app">
        <input type="text" v-model="name"><br/><br/>
        <input type="text" v-model="address"><br/><br/>
        <p>{{out}}</p>
    </div>
    <script>
        let info={
            name:'wzm',
            address:'hubei',
            out:'我叫wzm,来自hubei'
        }

        const vm = new Vue({
            el:'#app',
            data:info,
            watch:{
               name(value){
                  setTimeout(()=>{
                    this.out='我叫'+value+',来自'+this.address;
                },1000)
                //一秒钟得到值
                },
                address(value){
                    this.out='我叫'+this.name+',来自'+value;
                }
            }
        })
    </script>

</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

异步任务使用监视（定时器）

computed与watch之间的区别:
1.computed能完成的功能，watch都能完成
2.watch能完成的功能，computed不一定能完成，例如:watch可以进行异步任务
两个重要的原则:
1.所被vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象
2.所有不被vue管理的函数(定时器的回调函数，ajax的回调函数，promise等)，最好写成箭头函数，这样this的指向才是vm或组件实例对象

相关阅读:
C语言协程
C++跑题教程——开始学习C++
Grade 5 Math
arch_linux 虚拟机安装
安全防范之警惕钓鱼邮件
齿轮故障诊断技术研究
现代信号处理——自适应滤波器（离散维纳滤波器）
[23] IPDreamer: Appearance-Controllable 3D Object Generation with Image Prompts
《Unix系统编程手册》第三章系统编程概念学习
打包python代码库

原文地址：https://blog.csdn.net/zimingyo/article/details/126800140