vue watch写法

 watch: {
 			foods(n,o){
 			 console.log(n, o)
 			},
        	// 第一种方式：监听整个对象，每个属性值的变化都会执行handler
        	// 注意：属性值发生变化后，handler执行后获取的 newVal 值和 oldVal 值是一样的
            food: {
                // 每个属性值发生变化就会调用这个函数
                handler(newVal, oldVal) {
                    console.log('oldVal:', oldVal)
                    console.log('newVal:', newVal)
                },
                // 立即处理 进入页面就触发
                immediate: true,
                // 深度监听 属性的变化
                deep: true
            },
            // 第二种方式：监听对象的某个属性，被监听的属性值发生变化就会执行函数
            // 函数执行后，获取的 newVal 值和 oldVal 值不一样
            'food.name'(newVal, oldVal) {
                console.log('oldVal:', oldVal)   // 冰激凌
                console.log('newVal:', newVal)   // 棒棒糖
            }
        }

vue组件销毁重置

1. 解决vue子组件不刷新的痛点

//第一种
<template>
   <third-comp v-if="reFresh"/>
</template>
 
<script>
   export default{
       data(){
          return {
                reFresh:true,
                menuTree:[]
            }
       },
       watch:{
             menuTree(){
 
                  this.reFresh= false
                  this.$nextTick(()=>{
                    
                    this.reFresh = true
                })
            }
       }
}
</script>

//第二种
<template>
  <third-comp :key="menuKey"/>
</template>

<script>
  export default{
      data(){
         return {
               menuKey:1
           }
      },
      watch:{
            menuTree(){

               ++this.menuKey
           }
      }
}
</script>

将node-sass更新到最新版本 ,如果npm run dev还报错版本冲突,就第二步

cnpm i -D node-sass
npm rebuild node-sass