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或组件实例对象

相关阅读:
Recommender Systems in the Era of Large Language Models (LLMs)
OctaneRender界面布局自定义界面教程丨使用教程
【Vue渲染】条件渲染 | v-if | v-show | 列表渲染 | v-for
[Python从零到壹] 五十.图像增强及运算篇之图像直方图理论知识和绘制实现
微服务与中间件系列——RabbitMQ，SpringAMQP使用
Dubbo详解，用心看这一篇文章就够了【重点】
算法练习3——删除有序数组中的重复项
面试java框架-Spring
Node.js 入门教程 13 在 Node.js 中从命令行接收输入
HTTP请求方法

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