计算属性：computed
在computed中可以定义一些属性：计算属性。计算属性的本质其实就是一个方法，只不过在使用的时候可以直接当做属性来使用。具体有以下特点：
1. 计算属性在使用时不需要加(),直接写名称即可
2.如果计算属性用到了data中的数据，当data数据发生变化时，就会立即重新计算这个计算属性的值
3.计算属性在第一次使用时的结果会缓存起来，直到属性中依赖的data数据发生变化计算属性的结果才会重新求值
watch：Vue的watch属性可以用来监听data属性中数据的变化
<div id="app">
<input type="text" v-model="firstname" />
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
firstname:"",
lastname:""
},
methods:{},
watch:{
firstname:function(){
console.log(this.firstname)
}
}
})
</script>
可以从上述代码中实践得知，输入框内的值变化多少次，控制台就会打印多少次
同时还可以直接在监听的function中使用参数来获取新值与旧值
<div id="app">
<!--
由于Vue-router的hash匹配原则所以我们需要在原定义的路径上加一个#号
-->
<!-- <a href="#/login" rel="external nofollow" >登录</a>
<a href="#/register" rel="external nofollow" >注册</a>-->
<router-link to="/login" tag="span">登录</router-link>
<router-link to="/register">注册</router-link>
<router-view></router-view>
</div>
</body>
<script>
var login={
template:'<h1>登录组件</h1>'
}
var register={
template:'<h1>注册组件</h1>'
}
var routerObj = new VueRouter({
routes:[
//此处的component只能使用组件对象，而不能使用注册的模板的名称
{path:"/login",component:login},
{path:"/register",component:register}
]
})
var vm = new Vue({
el:'#app',
data:{
},
methods:{
},
router:routerObj,//将路由规则对象注册到VM实例上
watch:{
'$route.path':function(newValue,OldValue){
console.log(newValue);
console.log(OldValue);
}
}
})
</script>
watch是观察某一个属性的变化，重新计算属性值。computed是通过所依赖的属性的变化重新计算属性值。在这里插入代码片
大部分情况下watch和computed几乎没有差别。但如果要在数据变化的同时进行异步操作或者是比较大的开销，那么watch为最佳选择。
computed 和 methods 对比
<!--HTML部分-->
<div id="app">
<h1>{
{message}}</h1>
<p class="test1">{
{methodTest}}</p>
<p class="test2-1">{
{methodTest()}}</p>
<p class="test2-2">{
{methodTest()}}</p>
<p class="test2-3">{
{methodTest()}}</p>
<p class="test3-1">{
{computedTest}}</p>
<p class="test3-2">{
{computedTest}}</p>
</div>
<!--script部分-->
let vm = new Vue({
el: '#app',
data: {
message: '我是消息，'
},
methods: {
methodTest() {
return this.message + '现在我用的是methods'
}
},
computed: {
computedTest() {
return this.message + '现在我用的是computed'
}
}
})
1 . computed是属性调用，而methods是函数调用
2 . computed带有缓存功能，而methods不会被缓存
属性调用：
1 .computed定义的方法我们是以属性访问的形式调用，{
{computedTest}}
2 .methods定义的方法，我们必须要加上()来调用，{
{methodTest()}}
缓存功能：
计算属性具有缓存：只有当计算属性所依赖的属性发生改变时，才会重新去计算
methods不会被缓存：方法每次都会去重新计算结果。
methods,watch,computed的区别
1，computed 属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用。
2. methods 方法表示一个具体的操作，只要书写业务逻辑。
3. watch一个对象，键是需要观察的表达式，值是对应回调函数，主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；可以看作是 computed 和 methods 的结合体
计算属性的 getter 与 setter
计算属性默认只有get，在需要的时候也可以设置 set方法
fullName: {
get: function () {
return this.firstName + " " + this.lastName;
},
set: function (val) {
this.firstName = val.split(' ')[0];
this.lastName = val.split(' ')[1];
}
}