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="我是改變後的數據";
	}
}