vue常用属性整理

一、修饰符

• .trim默认自动去除用户输入内容中两端的空格
• .lazy在每次 change 事件后更新数据
• .number让用户输入自动转为数字

@keyup.enter.native 回车事件

二、注册全局自定义指令

除了 Vue 内置的一系列指令 (比如 v-model 或 v-show) 之外，Vue 还允许你注册自定义的指令

关于页面按钮权限设置可以自定义permission指令

Vue.directive('permission', {
  inserted (el, vDir) {
    let userInfo = localStorage.getItem('userInfo')
    // 获取当前用户可以使用的按钮
    let btnPermission = JSON.parse(userInfo).buttons
    if (vDir.value) {
      if (!btnPermission.includes(vDir.value)) {
        el.parentNode.removeChild(el)
      }
    }
  }
})

三、computed和watch的区别和运用场景

computed：计算属性，依赖其他属性值，并且其他computed的值有缓存，只有他依赖的属性值发生变化，下一次获取computed的值时才会重新计算computed的值

watch：观察数据的作用，类似于某些数据的监听回调，每当监听的数据变化时都会执行回调进行后续操作

四、关于vue双向绑定

通过发布订阅模式结合Object.defineProperty进行劫持

// 订阅器 => （添加订阅者，发通知）
let Dep = {
    clientList: {},  // 容器
    // 添加订阅者
    listen: function(key, fn) {
        // if(!this.clientList[key]) {
        //     this.clientList[key] = []
        // }
        // this.clientList[key].push(fn)
        (this.clientList[key] || (this.clientList[key] = [])).push(fn)
    },
    // 发布
    trigger: function(){
        // 类数组转数组
        let key = Array.prototype.shift.call(arguments),
            fns = this.clientList[key]
        // console.log(key) // view-1
        // console.log(arguments)
        
        if(!fns || fns.length === 0){
            return false
        }

        for(let i = 0, fn; fn = fns[i++];){
            fn.apply(this, arguments)
        }
        // for(let i=0;i<fns.length;i++){
        //     fns[i].apply(this,arguments)
        // }
    }
}

// 劫持方法
let dataHi = function({data, tag, datakey, selector }){
    let value = '',
        el = document.querySelector(selector);
    
    Object.defineProperty(data, datakey, {
        get: function(){
            console.log("取值")
            return value
        },
        // 数据修改
        set: function(val){
            console.log("设置值")
            value = val
            // 发布消息
            Dep.trigger(tag, val)
        }
    })
    // 添加订阅者
    Dep.listen(tag, function(text) {
        el.innerHTML = text
    })
}