Vue的使用技巧

一、监听对象

watch的deep设为了true，这样的话，如果修改了这个queryData中的任何一个属性，都会执行handler这个方法。不过其实这样开销是蛮大的，尤其是对象里面结构嵌套过深的时候。而且有时候我们就想关心这个对象中的某个属性，比如name，这个时候可以这样

对象具体属性的watch可以直接用引号把属性括起来，就可以实现对象中特定属性的监听事件

watch: {
   'queryData.name': {
     handler: function() {
      //do something
     },
   }
}
或
watch: {
　　'queryData.name'(newValue, oldValue) {
　　　　console.log(newValue)
    }
}

二、知道何时使用v-if（以及何时避免使用）

当v-if被打开或关闭时，它将创建并完全销毁该元素。相反，v-show将创建该元素并将其留在那里，通过设置其样式为display: none来隐藏它。（补充：v-show是不支持写在template模板上的）

如果你要切换的组件的渲染成本很高，那么这样做会更有效率。

反过来说，如果不需要立即执行昂贵的组件件，可以使用v-if，这样它就会跳过渲染它，而使页面的加载速度更快一些。

三、减少没必要的响应式数据,提高性能

如果一份数据没必要响应式,可以定义在data函数return的对象之外,这样vue就不会给这份数据处理成响应式数据,从而使页面初始化更快。有个缺点就是用watch是监听不到没有响应式数据的变化的。

<button type="primary" @click="clickA">{{a}}</button>
<button type="primary" @click="clickB">{{b}}</button>
data() {
    //写在return之外
    this.a = false
    const arr = []
    return {
      b: false,
      
    }
  },
  watch: {
    a(newVal) {
      console.log(newVal)
    },
    b(newVal) {
      console.log(newVal)
    }
  },
methods: {
    clickA() {
      this.a = !this.a
      console.log(this.a)
    },
    clickB() {
      this.b = !this.b
      console.log(this.b)
    },
}
data() {
    this.a = false
    const arr = []
    return {
      b: false,
      
    }
  },
  watch: {
    a(newVal) {
      console.log(newVal)
    },
    b(newVal) {
      console.log(newVal)
    }
  },
methods: {
    clickA() {
      this.a = !this.a
      console.log(this.a)
    },
    clickB() {
      this.b = !this.b
      console.log(this.b)
    },
}

四、给标签批量绑定属性

<div v-bind="obj"></div>
//等同于
<div nane='pj' age='18' height='180'></div>

obj = {
     nane:'pj',
     age: '18',
     height: '180'
}

五、给div绑定多个事件

<div v-on="{click: clickFn, mousemove: mousemoveFn}"></div>

六、v-for循环也可以遍历对象

<div v-for="(value, key, index) in obj"></div>

obj = {
    item: 1,
    item: 2,
    item: 3,
}

七、暴露子组件的方法

<child-component ref="childRef"/>


methods: {
//这样可以简化写法， 避免 this.$refs.component1.$refs.childRef.Fn()
    childFn(){
        this.$refs.childRef.Fn()
    }
}

八、$attrs 将爷爷组件的数据传给孙子组件。$listeners 可以获取到上级组件的监听事件

详情学习地址：vue $attrs和$listeners的使用 - 掘金

九、this.$options

   1.过滤器不能通过this来复用?不存在的

<div>{{ text | capitalize }}</div>

export default {
    data() {
        return {
            text: 'hello'
        }  
    },
    filters: {
        capitalize: function (value) {
            if (!value) return ''
            value = value.toString()
            return value.charAt(0).toUpperCase() + value.slice(1)
         }
    },
    methods: {
        getDetail() {
            //这样就不需要写两份filter的逻辑了，this.$options.filters还可以沿着原型链找到全局                                            的filter
            let capitalize = this.$options.filters.capitalize
            this.title = capitalize(res.data.title)
        }
    }
}

2.校验某个Boolean类型的props有没有传

this.$options.propsData.hasOwnProperty('disabled') ? this.disabled : this.elForm.disabled

十、取消watch的监听