methods,计算属性和监视

最新推荐文章于 2025-12-10 20:37:40 发布

原创最新推荐文章于 2025-12-10 20:37:40 发布 · 136 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

Vue初专栏收录该内容

24 篇文章

订阅专栏

本文详细介绍了Vue.js中methods、computed和watch的用法。methods用于定义方法，computed创建计算属性，watch则用于监听数据变化并执行相应操作。计算属性在数据变化时自动更新，而watch可以执行异步任务或复杂逻辑。文章强调了函数的this指向问题，并通过示例代码展示了三者在实际场景中的应用。

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>

计算属性（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>

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>

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

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