vue-cli watch简单用法

创建一个vue单文件

<template>
  <div id="test">
    <h4 @click="changeMsg()" id="outputDom">{{msg}}</h4>
  </div>
</template>

<script>
    export default {
        name: "test",
        data:function(){
          return{
            msg:'test msg'
          }
        },
        watch:{
          msg:function(){
            console.log('msg进行了改变');
          }
        },
        mounted:function(){
        },
        methods:{
          changeMsg:function(){
            this.msg = "改变MSG"
          }
        }
    }
</script>

<style lang="less">
</style>

　　

这个时候我点击h4标签的时候 便会触发watch中的msg方法