Methods，Computed，Watch

原创已于 2022-10-20 19:07:39 修改 · 127 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript #开发语言

于 2022-09-19 16:53:27 首次发布

VUE 专栏收录该内容

23 篇文章

订阅专栏

本文详细介绍了Vue.js中methods、computed、watch等核心概念的应用场景与区别，通过具体示例展示了如何利用这些特性来实现数据操作与视图更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

【vue简单的知识点，复习用】

Methods

methods就是方法，我们写的点击事件等各种事件都放在methods里面

Computed

计算属性，只依赖于所依赖的值，只会在他所依赖的值发生改变的时候才会改变，不能直接修改计算属性的值，如果要修改，需要将计算属性写成对象形式。

computed:{

计算属性：{

get(){

set(val){ val 新的值

}

案例多种方式添加￥符号

1、直接在标签内添加

<h1> ￥{{ num }}</h1><!--直接在标签内添加1-->

2、插值表达式内拼接

<h1>{{ "￥" + num }}</h1><!--插值表达式内拼接-->

3、过滤器

<h1>{{ num | filterNum }}</h1><!--过滤器-->



filters: {
    filterNum(num) {
      return "￥" + num;
    },
  },

4、methods方法

<h1>{{ add() }}</h1><!--methods方法-->


 methods: {
    add() {
      return "￥" + this.num;
    },
  },

5、computed计算属性

<h1>{{ comNum }}</h1><!--computed计算属性-->


 computed: {
    comNum() {
      return "￥" + this.num;
    },
  },


computed: {
    comNum: {
      get() {
        return "￥" + this.num;
      },
      set(val) {
        this.num = val.replace("￥", "");
      },
    }, 
  },

拓展 replace 字符串替换

Watch

监听属性 watch 和 data 同一级

watch:{

要监听的值(新值，旧值){

}

如果说要开启立即监听（一进入页面立马触发）深度监听（要监听引用数据类型的值的改变）使用下面格式：

watch: {

要监听的值: {

handler(newVal, oldVal){

immediate: true//立即监听

deep: true//深度监听

}

监听属性都可以监听哪个内的值改变？

1.data内的数据

	    data:function(){
			return {
				num: 0,
				obj: {
					num:0
				}
			}
		},
        watch : {
          obj : {
				handler(newVal,oldVal){
					console.log('obj的num改变了',newVal,oldVal)
				},
				deep: true
			}
        }

2.计算属性内的值

            computed:{
			numCom(){
				return this.num**2
			}
		},
            watch:{
			numCom(n,o){
				console.log('计算属性的改变',n,o)
			}
        }

3.监听路由

	   watch:{
			$route(n,o){
				console.log('路由改变了',n,o)
			}
		}

4.监听父组件传到子组件的值

watch和computed的区别

运行时机不同

1.computed是在HTML，DOM加载后马上执行的，如赋值；（属性将被混入到Vue实例）

2.watch 用于监听，观察Vue实例上的数据变动，一般情况下在依赖项的值变化之后再执行，当然也可以立刻执行

计算属性有缓存

代码内容不同

watch可以写任意的逻辑代码；而计算属性必须是同步的计算，并且要有返回值。