Vue 使用技巧手记

watch监听

Vue监听属性有很多种写法，也有几个配置选项

使用配置项

new Vue({
    watch:{
        content:{
            handler(old,newVal){
                console.log(old,newVal)
            }，
            deep:true，
            immediate:true
        }
    }
})

1. deep：是一个布尔类型，告诉Vue以递归的方式监听嵌套对象内部值的变化。
2. immediate：是一个布尔值类型，会立即触发而调用处理函数，而不用等到属性值第一次发生变化时才调用。

以上两个值默认值都为false，不需要的时候完全可以忽略。使用下面这种方法。

new Vue({
    watch:{
        content(old,newVal){
            console.log(old,newVal)
        }
    }
})

或者还可以这样写

new Vue({
    watch:{
        content:"watchContent"
    },
    methods:{
        watchContent(val,oldVal){
            console.log(val,oldVal)
        }
    }
})

在使用immediate的时候，由于是自动触发，这样会导致旧值为undefined，这一点需要格外注意。

component 使用

在做项目中，可能会有一些情况，比如：弹窗里面可能有很多东西，这样的话需要写N个弹窗来支撑业务，否则就需要把所有的组件全部写在一个弹窗里面，但是这样会造成代码的混乱。

解决方案：

abc.vue

<template>
  <div>
    我是 abc
  </div>
</template>

app.vue

<template>
    <alert v-if="componentName">
        <component :is=" 'q-'+componentName "/>
    </alert>
</template>

<script>
export default {
    data(){
        return {
            componentName:null
        }
    }
}
</script>

组件内model属性

Vue 2.2.0推出model属性用来让使用者在组件中自定义触发v-model的触发时机，在没有推出该api之前默认使用input事件触发v-model更新。

官网解释：

允许一个自定义组件在使用v-model时定制prop和event。默认情况下，一个组件上的v-model会把value用作prop且把input用作event，但是一些输入类型比如单选框和复选框按钮可能想使用value prop来达到不同的目的。使用model选项可以回避这些情况产生的冲突。

实例：

children:

export default {
  /**
   * 自定义v-model
   */
  model: {
    //  v-model默认绑定的值
    prop: "modelList",
    //  当组件使用v-model的使用使用change事件触发，原来没有更改的使用使用input事件触发
    event: "change"
  },
  props:{
    modelList:{
      type:Array,
      default:() => []
    }
  },
  methods:{
    changeModel(){
        let newList = [1,2,3];
        this.$emit("change", changeModel);
    }
  }
}

parent

<template>
    <children v-model="newList"/>
</template>
export default {
    data(){
        return {
            newList:[]
        }
    },
    watch:{
        newList:{
            handler(old,newVal){
                console.log(old,newVal)
            }，
            deep:true
        }
    }
}

大致使用就是这样，当Children组件遇到this.$emit("change")事件时候，会把接收到的参数，通过v-model实现数据绑定。

全局方法以及插件编写

在vue中拓展自己的插件供项目使用。

myGlobalMethod .js

export default {
    install(Vue, options) {
        Vue.myGlobalMethod = function () {      // 1. 添加全局方法或属性，如:  vue-custom-element
            // 逻辑...
        }

        Vue.directive('my-directive', {      // 2. 添加全局资源：指令/过滤器/过渡等，如 vue-touch
            bind (el, binding, vnode, oldVnode) {
                // 逻辑...
            }
            ...
        })

        Vue.mixin({
            created () {      // 3. 通过全局 mixin方法添加一些组件选项，如: vuex
                // 逻辑...
            }
            ...
        })    

        Vue.prototype.$myMethod = function (options) {      // 4. 添加实例方法，通过把它们添加到 Vue.prototype 上实现
            // 逻辑...
        }
    }
}

main.js

import Vue from "vue";
import myGlobalMethod  from "./plugin/myGlobalMethod.js";
Vue.use(myGlobalMethod);
this.$myMethod();

函数式组件

函数式组件是无状态的，而且不能使用this，因此render函数获得了一个新的context上下文参数，包含prop，事件监听，字内容，插槽以及一些其他数据。

export default {
    functional:true,
    render(h,{props,children}){
        return h(`h${props.livel}`,children)
     }
}

可以使用模板的functional替换掉functional:true。

<template functional>
    <div>{{props.message}}</div>
</template>