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）
• 使用方法：

打标志：<h1 ref="xxxxx">....</h1>   或 <School ref="xxxx"/>
获取：this.$refs.xxxxx