vue 524 (生命周期 计算属性 监听)

Posted xfym888

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue 524 (生命周期 计算属性 监听)相关的知识，希望对你有一定的参考价值。

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

 

技术分享图片

 依据上表可以确定各个位置的先后触发顺序

 

//  关于计算属性:

    vue改变或获取一个内部方法有以下两种种.

     1.在vue对象中 以  methods:{}模式定义各类成员方法:

        例如(js  vue对象定义内): methods:{ FF1(){return  成员变量1+‘bbb‘}

               在标签内使用时为   <标签> {{FF1()}}  </标签>   //返回  FF1()方法值

               该模式是每次调用都会返回最新值. 

   2. 在vue对象中 以  computed:{}模式定义各类成员方法:

              例如(js  vue对象定义内): computed:{ FF1(){return  成员变量1+‘bbb‘}

              在标签内使用时为   <标签> {{FF1}}  </标签>   //返回  FF1()方法值

 

               该模式是每次调用不一定会返回最新值. ,除非所引用的变量值发生变更,不然每次调用都是原始值,当调用的变量发生变化时,计算属性值会自动更新

 

 //watch:可以检测指定变量变化,并做指定操作

                watch:{变量名1(新值,旧值){用新旧值做先关操作.})} 

 

 

///以上内容配套测试代码///

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>生命周期+计算属性  监听</title>
 <script  src="vue.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="zuj">
 {{fl + ln}}
 <input type="button" value="chang" v-on:click="xg">
</div>
</body>
<script  type =‘text/javascript‘>
 var vm= new Vue({
  el:‘#zuj‘,
  data:{mmm:‘test123456‘,
        fl:‘aaa‘,
        ln:‘bbb‘},
   watch:{fl(nv,odv){console.log(nv)}},
  mounted:
  function(){
    console.log(‘mounted died‘)   //后执行
  },
  created:function(){
    console.log(‘created did‘)  //先执行
  },
  methods:{   //此范围内将以 fh() 方式进行调用
    fh(){ return this.mmm.split("").reverse().join("")},
    xg(){this.fl=‘cccc‘},
            },
   computed:{
    fh2(){
      return this.mmm +"kkkkkkkklklk"  //调用后,如果mmm值不变化,则调用一直未首次调用值
    }
   }
 })
</script>
</html>

 

以上是关于vue 524 (生命周期 计算属性 监听)的主要内容，如果未能解决你的问题，请参考以下文章

vue生命周期函数区别作用

vue小结

Vue定义组件和生命周期函数及实例演示！

Vue.js 生命周期详解以及使用技巧

Vue生命周期计算属性

vue 计算属性 实例选项 生命周期