zoukankan      html  css  js  c++  java
  • mounted 与 methods 与 computed 与 watched区别

    首先讲一下vue的生命周期

    beforecreate : 举个栗子:可以在这加个loading事件 

    created :在这结束loading,还做一些初始化,实现函数自执行   (data数据已经初始化 但是 dom结构渲染完成 组件没有加载)

    mounted : 在这发起后端请求,拿回数据,配合路由钩子做一些事情  (dom渲染完成 组件挂载完成 )

    beforeDestroy: 你确认删除XX吗?(简单来说  就是组件还存在)

     destroyed :当前组件已被删除,清空相关内容  (组件已经销毁 )

    所以说  mounted 是生命周期方法之一,会在对应生命周期时执行。

    而   methods 是Vue实例对象上绑定的方法,供当前Vue组件作用域内使用,未调用不会执行。

    而 computed 是计算属性  属性 method是 方法 

    在使用时   computed函数直接使用  method需要加上()【如method()】来执行 

    computed计算的结果如果不发生改变就不会触发。而methods中一般都是定义的需要事件触发的一些函数。每次只要触发事件,就会执行对应的方法。如果把computed中的方法写到method中会浪费性能。computed必须返回一个值页面绑定的才能取得值,而methods中可以只执行逻辑代码,可以有返回值,也可以没有。

    对于watched 属性 监听 需要自己手动去写监听的值 会大大的浪费一定性能去做监听这种事情 不像computed是自动的

    当写成:

     1 mounteds:{
     2            add(){
     3                this.$store.commit('ADD')
     4            }
     5        },
     6 mutations:{
     7             ADD(state,payload){
     8                 state.pagesize++
     9                 console.log(state.pagesize)
    10             }
    11         }

    会报错:

     vue.esm.js:629 [Vue warn]: Property or method "add" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
     

    所以 上面一定要用methods 实例对象上绑定的方法,供当前Vue组件作用域内使用,未调用不会执行



    原文:https://blog.csdn.net/qinlulucsdn/article/details/80473382

  • 相关阅读:
    移动端input中的placeholder属性垂直
    js将文字转化为语音并播放
    js生成二维码
    jquery移除事件,绑定事件,触发事件
    js计算本地时间
    正则判断支付金额
    去除input默认带的上下按钮与修改placeholder的默认颜色、背景、placeholder内容的大小
    rem自适应手机端布局
    Python_PyQt5_库
    Python_用PyQt5 建 notepad 界面
  • 原文地址:https://www.cnblogs.com/xuyx/p/10909497.html
Copyright © 2011-2022 走看看