vue 2.x技术总结

watch和conputed对比

两点总结

当watch和computed都能实现的时候用computed
Watch是命令式且重复的;可以开启异步任务;计算属性不可以开启异步任务;

两个小原则(this):

被vue管理的函数,最好写成普通函数,这样this的指向才是vm或组件实例对象

所欲不被vue管理的函数(如定时器函数,ajax的回调函数,Promise的回调函数等),最好写成箭头函数,这样this指向才是vm或者组件实例对象。

过滤器(处理数据)

day.js比moment.js体积小
dayjs(this.time).format('YYYY年MM月DD日')

局部过滤器

image.png

多个过滤器方法


image.png

全局过滤器

image.png

总结


image.png

指令


image.png
image.png

nextTick

作用:在下一次在dom更新结束后执行指定的回调
什么时候使用:当改变数据后,要基于更新后的Dom进行某些操作时,要再nextTick所指定的回调函数中执行。

mixin(混入)

功能:可以把多个组件共用的配置提取成一个混入对象
使用方式:

第一步定义混合,如:

 {
     data(){…},
     methods:{….}
     ……
 }

第二步使用混入,如:

export const hunhe = {
    data(){
        return {x:100, y:200}
    }
    methods: {
          showName(){
              alert(this.name)
          }
    },
    mounted(){
        console.log('xxxxxx')
   }
}

import {hunhe}  from '../mixin'

 1.全局混入:Vue.mixin(xxxxx)
 2.局部混入:mixins:['xxxxxxx']

ref属性

  • 被用来给元素或子组件注册引用信息(id的替代者)
  • 应用在html标签上获取的是真实dom元素,应用在组件标签上是组件实例对象(vc)
  • 使用方法:
打标志:

....

获取:this.$refs.xxxxx

你可能感兴趣的:(vue 2.x技术总结)