vue中的computed和watch

<template>

<template>
    <!-- 所有的内容要被根节点包含起来 -->
    <div id="app">
      msg:{{msg}}<br/>
      msg2:{{msg2}}<br/>
      <button @click="setMsg()">执行方法改变msg</button>
    </div>
</template>

<script>

/*
computed：是一个属性，因此是computed:{}而不是函数形式computed(){}
它是用来定义变量的，但是这个变量是通过其他变量计算得来的，会跟随的那个变量的改变而改变
像下面这个例子：
  msgs是新定义的变量，它的值是由msg计算得来的，因此msg的值一改变，msg2的值也会跟着改变
 */
computed:{
  msg2(){
	// console.log("这里这里这里computed:"+this.msg);
	return this.msg+this.msg; //一定要有return
  }
},

/*
watch：也是一个属性
  监听某个或多个属性的值，只要值发生变化，就会触发函数执行相应的操作
  注：这里不需要return
 */
watch:{
  msg:function(){
	console.log("watch监听到的msg的值："+this.msg);
  }
},
methods:{
	setMsg(){
		this.msg="我是改变后的数据";
	}
}