六，侦听器，watch选项和computed选项区别

一，watch选项

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

使用 watch 选项允许我们执行异步操作 (访问一个 API)，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。

如我们单击按钮+1，侦听num的数值发生变化我们就log一下

  <div id="app">
 {{num}}
 <button @click="fn">单击+1</button>
</div>
    <script src="https://unpkg.com/vue@next"></script>
    <script>
       Vue.createApp({
        //数据
        data(){ 
            return{
             num:0
            }
        },
        methods:{
            fn(){
                this.num++
            }
        },
        watch: {
            num(){
            
                console.log("数据发生变化");
            }
        }
       }).mount("#app")

• watch如果在数据变化的同时我们需要一些异步操作使用watch

二，delimiters选项

用于修改{{}}双大括号差值写法,下面例子就是修改为${}

delimiters: ['${', '}']