每周有收获之-vue 组件制造小注意

// vue 深层探究

// Vue.extend( options )

// 使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。 data 必须是函数的返回，因为是子例

// 举个例子

const Demo = Vue.extend({

template:`<h1 @click="onHandle">标题 {{a}}</h1>`,

data(){

return {

a:100

}

},

methods:{

onHandle(){

this.a = 99;

// 注意 then 需要浏览器支持Promise

// $nextTick 在下次 DOM 更新循环结束之后执行延迟回调

this.$nextTick().then(()=>{

alert(11)

})

}

}

})

const demoInstance = new Demo().$mount("#app");

demoInstance.$once('hook:beforeDestroy', () => {

// 你可以在组件的生命周期中做一些事情

})

// Vue.set

var vm = new Vue({

el:'#test',

template:`<h1>年龄{{age | filtersAge | filterAgePlus}}</h1>`,

data:{

age:5,

//data中已经存在info根属性

info:{

name:'小明'

}

},

filters:{ // 有点管道函数的额味道

filterAgePlus(val){

return val * 2;

},

filtersAge(val){

console.log(val)

return val + 1;

}

}

});

//给info添加一个性别属性

Vue.set(vm.info,'sex','男');

// Vue.delete( target, propertyName/index ) 与set一样的用法

// 注意

//组件内部使用 this.$set(this.info,"sex", "男")

 

// vue 继承 mixins 、extends

// 其实两个都可以理解为继承，

// mixins接收对象数组（可理解为多继承），extends接收的是对象或函数（可理解为单继承）。

// 结论：子类再次声明，data中的变量都会被重写，以子类的为准。

// 如果子类不声明，data中的变量将会最后继承的父类为准。

// 经过测试，props中属性、methods中的方法和computed的值继承规则一样。

//. extends 优先级高于mix  ；如果父亲有template  子类也有template  那么子类会覆盖父类。

 

// const extend = {

// created () {

// console.log('extends created')

// }

// }

// const mixin1 = {

// created () {

// console.log('mixin1 created')

// }

// }

// const mixin2 = {

// created () {

// console.log('mixin2 created')

// }

// }

// export default {

// extends: extend,

// mixins: [mixin1, mixin2],

// name: 'app',

// created () {

// console.log('created')

// }

// }

 

// vm.$on( event, callback )

// m.$on('test', function (msg) {

// console.log(msg)

// })

// vm.$emit('test', 'hi') //触发当前实例上的事件

// => "hi"