【学习打卡】第5天 【2022版】Vue3 系统入门与项目实战第五讲
课程名称： 2022持续升级 Vue3 从入门到实战 掌握完整知识体系
课程章节： Vue 中的高级语法
主讲老师： Dell
课程内容：
今天学习的内容包括：
组件data，methods 的优先级高于mixin data ,methods 优先级
生命周期函数，先执行mixin里面的，再执行组件里面的
插件指的把通用性的功能封装
课程收获：
5.1/5.2 心得：
-
混入：
（1）局部mixin
在组件里面写 mixins:[myMixin]
组件里引入的子组件无法使用该mixin，哪里使用，哪里使用混入语句
（2）全局mixin
app.mixin({ mixin内容 })
不推荐使用，代码维护性不高
-
优先级
组件的data，methods 优先级 高于 mixin 的data，methods 优先级
自定义属性 组件中的属性 优先级 高于 mixin 属性的优先级（可修改，通过自定义属性的策略变更，修改自定义属性的优先级） -
执行顺序
生命周期函数，先执行 mixin 里面的，在执行组件里面的
const myMixin = {
num:5,
data() {
return {
number: 2,
count:11
}
}, // 优先级比组件data的低，会被覆盖
created(){
console.log('mixin created');
},// 生命周期函数，先执行mixin里的
methods: {
handleClick() {
console.log('mixin handleClick');
},
},// 优先级比组件data的低，会被覆盖
}
const app = Vue.createApp({
num:6,
data() {
return {
number: 1,
}
},// 优先级比mixin的data的高
mixins:[myMixin], //混入mixin ，局部mixin，子组件无法使用
methods: {
handleClick() {
console.log('handleClick');
},
},// 优先级比mixin的data的高
created(){
console.log('created');
},// 生命周期函数，先执行mixin里的，后执行组件里面的
template: `
<div>
<div>{{number}}</div>
<div>{{count}}</div>
<div>{{this.$options.num}}</div>
<child />
<button @click="handleClick">增加</button>
</div>
`
});
// 全局mixin
app.mixin({
data() {
return {
number: 2,
count: 11
}
}, // 优先级比组件data的低，会被覆盖
created() {
console.log('mixin created');
}, // 生命周期函数，先执行mixin里的
methods: {
handleClick() {
console.log('mixin handleClick');
},
}, // 优先级比组件data的低，会被覆盖
})
// 自定义属性 策略变更 修改自定义属性的优先级
app.config.optionMergeStrategies.num = (mixinVal, appValue) => {
return mixinVal || appValue
}
// 子组件
app.component('child', {
mixins: [myMixin], //局部混入mixin
template: `<div>{{count}}</div>`
})
const vm = app.mount('#root'
app.mixin（{}）：定义的是全局的mixin，默认是全局的每个组件都可以用，不用像局部mixin用mixins：[]（不推荐使用）
自定义的属性，组件中的属性优先级高于 mixin 属性的优先级
自定义属性的调用：this.$options.number（vue的组件上所有的内容，vue做处理之后，都会把它挂到options上面）
// mixin 混入
// 组件 data，methods 优先级高于 mixin data， methods 优先级
// 生命周期函数，先执行 mixin 里面的，再执行组件里面的
const myMixin = {
number:1
}
const app = Vue.createApp({
number:2,
template:
<div>
<div>{{this.$options.number}}</div>
</div>
});
}
const vm = app.mount('#root');
自定义属性（组件内和mixin）更换优先级，默认为组件的优先级高，提高自定义属性的优先级方法：（策略变更）
app.config.optionMergeStrategies.number = （mixinVal，appValue） = > {
return mixVal || appValue；
}
5.3/5.4 心得：
自定义指令：分为全局的自定义指令和局部的自定义指令
- 全局自定义指令（定义app实例的direactive）
const app = VueCreated({
template: '<div><input v-focus></div>'
})
app.directive({
'focus',
mounted(el){
el.focus()
}
}
})
- 局部自定义指令
const directive = {
focus: {
mounted(el){
el.focus()
}
}
}
const app = VueCreated({
directive,
template: '<div><input v-focus></div>'
})
在自定义指令中，可以通过mounted，updated来进行相关操作
如果mounted和updated的方法一样可以简写成
app.directive（‘pos’，（el，binding）=> {
el.style.top = （binding.value + ‘px’）；
}）
自定义指令也可以用v-pos：left=‘distance’绑定进行操作binding.arg可以获取到冒号后面的值
data(){
return{
distance:110 }
}
},
template:
<div>
<div v-pos:left="distance" class="header">
<input />
</div>
</div>
5.5 心得：
teleport 传送门：
把一个组件里的某些元素，或者某些组件直接挂到其他的dom里去（eg：模态框，蒙层效果）
<teleport to = ‘body’>
<div class = ‘mask’></div>
</teleport>
// teleport 传送门
const app = Vue.createApp({
data(){
return{
show: false
}
},
methods:{
handleBtnClick(){
this.show = !this.show; }
},
template:
<div class="area">
＜button ＠click＝"handleBtnClick">按钮<／button＞
<teleport to="#hello">
<div class mask" v-show="show"></div>
</teleport>
</div>
5.6 心得：
render函数
<script>
// render function
// template -→ render -→ h -→ 虚拟DOM（JS对象）-→真实 DOM-→展示到页面上
const app =Vue.createApp({
template:
<my-title :level="2">
hello dell
</my-title>
});
app.component('my-title',{
props:['level'],
render(){
const{h}=Vue;
return h('h' + this.level, {}, this.$slots.default()) }
})
const vm = app.mount('#root');
</script>
5.7心得：
plugin：插件，也是把通用性的功能封装起来
// 创建插件
const myPlugin = {
install（app，options）{
console.log（app，options）；
}
}
// 使用插件
app.use（myPlugin，{name：‘dell’}）；
5.8 心得：
使用plugin扩展一个验证功能，当输入新的数据时，进行判断并输出相关信息，底层是用的mixin，但是推荐使用plugin封装，
共同学习，写下你的评论
评论加载中...
作者其他优质文章
