一般来说，当模板内容较简单时，使用data选项配合表达式就可，可如果逻辑比较复杂就需要用到methods,computed,watch等方法。
一、data
它是Vue实例的数据对象，Vue将会递归的将data属性转换为get/set，从而让data属性能响应数据的变化。Vue实例创建后不能直接访问，而是要通过vm.$data来访问原始数据对象，通过vm.$set/vm.$delete来操作对象。
<div id="app"> {{arr}}<br> {{obj}} </div> <!-- 导入vue.js --> <script src="./vue.js"></script> <script> let vm = new Vue({ el: '#app', data: { msg: 'test', obj: { age: 20 }, arr: [1, 2, { name: "ph" }], } }); vm.$set(vm.obj, 'age', 30) console.log(vm.obj); vm.arr[2].name = 'vue' console.log(vm.arr); console.log(vm.$data);
computed: 计算属性函数computed将被混入到Vue实例中，这样可以将复杂的逻辑从模板计算中解脱出来，有利于代码的可维护性。特点：主要是根据已有属性生成新的属性；基于响应式依赖进行缓存，this指向vm实例自己。
如下实例，我们可以看到它声明了一个revName的计算属性，它虽然写的一个方法，但revName代表的是它的返回结果。
<body>
<div id="app">
<h4>原始数据：{{name}}</h4>
<h4>反转后数据：{{revName}}</h4>
<input type="text" v-model="name">
</div>
</body>
<script>
let vm = new Vue({
el: '#app',
data: {
name: "davina"
},
computed: {
//这里的属性也会被挂载到当前的实例上，methods data computed这三者中的属性名不能重复
revName() {
return this.name.split('').reverse().join('');
}
}
});
</script>
在上面的函数中，同步使用Vue变量，上面的写法相当于写了一个get函数，如果有需要我们可以将其写完整。
<script> let vm = new Vue({ data: { num: 1 }, computed: { //仅读取，值为函数 add: function () { return this.num + 1; }, //读取和设置 minus: { get: function () { return this.num - 2; }, set: function (val) { this.num = val - 3; } } } }); console.log(vm.minus);//-1 vm.minus = 10; console.log(vm.num);//7 console.log(vm.add);//8 </script>
methods：methods中的this自动绑定为Vue的实例。它不存在缓存，每次调用都编译执行函数代码，它不能使用get，set，在表达式中可以通过调用方法达到和调用computed属性一样的显示效果，一般是用于回调函数。
<body>
<div id="app">
<h2>{{count}}</h2>
<button @click="add"> + </button>
<button @click="add(10,$event)"> +10 </button>
</div>
</body>
<script>
let vm = new Vue({
el: '#app',
data: { count: 0 },
methods: {
add(n) {
typeof n == "object" ? this.count++ : this.count += n;
}
}
});
</script>
watch：主要用于监听vue实例已有属性的变化（不管是data中的属性还是computed中的属性），对于不存在的属性无法起作用，它可以在参数列表拿到变化的前一个对象和变化后的新对象，检测对象深层次属性的变化以及回调函数是否立即触发执行。默认情况下watch只会针对监听数据本身的改变及数据内部的改变它是监听不到的，这时我们需要进行深度监听（deep），一般也会和立即执行（immediate）一起使用。
<body>
<div id="app">
<h4>这个人的全名是：{{fullName}}</h4>
<input type="text" v-model="firstName"><br>
<input type="text" v-model="lastNAame">
</div>
</body>
<script>
let vm = new Vue({
el: '#app',
data: {
firstName: '',
lastNAame: '',
fullName: ''
},
watch: {
firstName(val) {
this.fullName = val + '·' + this.lastNAame;
},
lastNAame(val) {
this.fullName = this.firstName + '·' + val;
}
}
});
</script>
template: '#my-app',
data() {
return {
info: { name: "why", age: 18, nba: {name: 'kobe'} }
}
},
watch: {
// 默认情况下我们的侦听器只会针对监听的数据本身的改变
// 深度侦听/立即执行(一定会执行一次)
info: {
handler: function(newInfo, oldInfo) {
console.log("newValue:", newInfo.nba.name, "oldValue:", oldInfo.nba.name);
},
deep: true, // 深度侦听
// immediate: true // 立即执行
}
},
还可以使用this.$watch这种方式。如下所示：
created() {
const unwatch = this.$watch("info", function(newInfo, oldInfo) {
console.log(newInfo, oldInfo);
}, {
deep: true,
immediate: true
})
// unwatch()
}
当然也可以用computed来实例上面示例的效果，代码如下：
<script>
let vm = new Vue({
el: '#app',
data: {
firstName: '',
lastName: '',
},
computed: {
//注意fullName的位置
fullName() {
return this.firstName + '·' + this.lastName;
}
}
});
</script>
computed和watch的区别：
computed是计算属性，它更多的是用于计算值的场景。它还具有缓存性，如果依赖的属性没有变化，不会重新执行对应的函数。computed的值在get执行后是进行了缓存的，只有在它依赖的属性值改变后，下一次获取computed的值时才会重新调用对应的get来进行计算。computed适用于比较消耗性能的计算场景。
watch它更多的是观看，侦别，类似于某些数据的监听回调，它没有缓存，页面重新渲染时它都会执行对应的回调。
所以当我们要进行数据计算且依赖于其它数据时可以用computed。但如果在数据变化需要进行一些操作可以用watch。
<!--全选--> <div id="app"> <input type="checkbox" v-model="checkAll"><br> <input type="checkbox" v-for="(check,index) in checks" v-model="check.value"> </div> <script src="vue.min.js"></script> <script> let vm = new Vue({ el: '#app', data: { checks:[{value:true},{value:true},{value:false}] }, // 内部是defineProperty computed:{ checkAll:{ // 如果一个为false 就为false get(){ return this.checks.every(check=>check.value) }, set(newValue){ this.checks.forEach(check => { check.value = newValue }); } }, } }); </script>
二、生命周期
Vue实例在创建时有一系列的初始化步骤，如下实例生命周期示意图。
各个生命周期的作用：
beforeCreate：组件实例被创建之初，组件的属性生效前，在new Vue时会最先调用这个钩子，当我们想在每个组件中增加一些特定的属性可以用这个钩子，它一般是不会做太多功能的。基本的业务逻辑上是不需要它的；
created：组件实例已经完全创建，即当前这个组件实例已经实现了数据劫持，属性创建，但它不能获取真实的DOM
beforeMount：在挂载前会调用render方法，这个方法在挂载开始前被调用基本上用不到，它是检测有没有template属性，有的话会把这个template渲染成一个render函数；
mounted：当前组件挂载完成，el被新创建的vm$el替换;
beforeUpdate：组件数据更新之前调用，在更新前在做一次修改，这时数据必须是应用在视图上的。它是在虚拟DOM打补丁前；
update：组件数据更新之后，这时不能再修改数据了；
beforeDestory: 组件销毁前调用，一般是用来清除定时器，移除绑定的方法事件
destoryed：组件销毁后调用
