每个 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>
原文地址：https://www.cnblogs.com/xfym888/p/9085773.html