239 lines
5.7 KiB
Plaintext
239 lines
5.7 KiB
Plaintext
|
lession 1、插值表达式、指令、动态属性、v-html
|
|||
|
|
|
|||
|
|
{{name}}
|
|||
|
|
|
|||
|
|
<p :id="did"></p>
|
|||
|
|
|
|||
|
|
<div v-html="html">
|
|||
|
|
<p>我是哈默</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
v-html 会造成xss攻击
|
|||
|
|
|
|||
|
|
lession 2、计算属性
|
|||
|
|
|
|||
|
|
会做数据缓存
|
|||
|
|
|
|||
|
|
double2:{
|
|||
|
|
get(){
|
|||
|
|
return this.number*2 //原值改变，计算属性改变
|
|||
|
|
},
|
|||
|
|
set(value){
|
|||
|
|
this.number=value/2 //计算属性改变，原值还原
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
lession 3、watch监听器-用来监听数值的变化
|
|||
|
|
|
|||
|
|
data(){
|
|||
|
|
return{
|
|||
|
|
name:'哈默',
|
|||
|
|
info:{
|
|||
|
|
hobby:'篮球'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
watch:{
|
|||
|
|
//字符串监听
|
|||
|
|
name(newVal,oldVal){
|
|||
|
|
console.log('name',newVal,oldVal);
|
|||
|
|
},
|
|||
|
|
//对象数据的监听
|
|||
|
|
info:{
|
|||
|
|
handler:function(newVal,oldVal){
|
|||
|
|
console.log('info',newVal,oldVal)
|
|||
|
|
},
|
|||
|
|
deep:true //深度监听开关
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
lession 4、动态绑定 Class 和 Style
|
|||
|
|
|
|||
|
|
对象方式动态绑定样式
|
|||
|
|
<li class="item" :class="{'active':isActive}">项目1</li>
|
|||
|
|
数组方式绑定样式
|
|||
|
|
<li class="item" :class="['active']">项目1</li>
|
|||
|
|
行内样式动态绑定
|
|||
|
|
<li class="item" :style="styleData">项目1</li>
|
|||
|
|
data(){
|
|||
|
|
return {
|
|||
|
|
isActive:true,
|
|||
|
|
styleData:{
|
|||
|
|
background:'#efefef',
|
|||
|
|
color:'#ffffff'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
lession 5、v-if 和v-show 的区别
|
|||
|
|
|
|||
|
|
<p v-if="data==='a'"> a(v-if) </p>
|
|||
|
|
<p v-show="data==='b'"> b(v-show) </p>
|
|||
|
|
|
|||
|
|
v-if 是直接决定页面元素是否存在
|
|||
|
|
v-show是在样式级别控制元素是显示还是因此
|
|||
|
|
|
|||
|
|
lession 6、v-for 列表循环
|
|||
|
|
数组遍历：
|
|||
|
|
<li v-for="(item,index) in array" :key="item.id"></li>
|
|||
|
|
对象遍历：
|
|||
|
|
<li v-for="(value,key,index) in object" :key="key"></li>
|
|||
|
|
object:{
|
|||
|
|
name:'桃谷六仙'，
|
|||
|
|
hobby:'篮球'
|
|||
|
|
}
|
|||
|
|
v-if 和 v-for 联合使用
|
|||
|
|
v-for 优先级比较高，可以在v-for 的父元素写v-if判断
|
|||
|
|
|
|||
|
|
lession 7、事件
|
|||
|
|
|
|||
|
|
@click="logout(3,$event)"
|
|||
|
|
|
|||
|
|
logout(id,e){
|
|||
|
|
alert(id)
|
|||
|
|
console.log('e',e)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
lession 8、父子组件通信方法prop $emit
|
|||
|
|
|
|||
|
|
通信方式总结:
|
|||
|
|
父组件数据传递给子组件步骤：
|
|||
|
|
1.父组件定义传递给儿子的数据
|
|||
|
|
2.子组件用prop定义传递过来的数据的类型和变量的名称
|
|||
|
|
3.父组件调用子组件，并进行属性值和变量名绑定
|
|||
|
|
4.子组件调用父组件传递过来的数据
|
|||
|
|
子组件给父组件传递数据的步骤：
|
|||
|
|
1.子组件定义传递给父组件的数据对象和事件
|
|||
|
|
2.父组件调用子组件，并且在调用标签绑定子组件传递过来的事件名称
|
|||
|
|
3.在父组件的事件处理函数中接受子组件传递的数据对象
|
|||
|
|
|
|||
|
|
lession 9、兄弟组件通信方式
|
|||
|
|
|
|||
|
|
定义一个vue 实例
|
|||
|
|
然后在兄弟组件中组件挂载的时候使用
|
|||
|
|
eventBus.$on('addItem',this.handleAddTitle);
|
|||
|
|
handleAddTitle(title){
|
|||
|
|
console.log('title',title)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.$emit('add',this.title)
|
|||
|
|
eventBus.$emit('addItem',this.title)
|
|||
|
|
|
|||
|
|
lession 10、父子组件传值的5种方式
|
|||
|
|
一、props+$emit()
|
|||
|
|
二、回调函数方式(callback)
|
|||
|
|
三、$parent+$children this.$children[0].data this.$parent.data
|
|||
|
|
四、provide+inject 父组件 provide 子组件 inject
|
|||
|
|
五、$attrs+$listeners 父、子、孙 三代组件 在子组件中用 v-bind="$attrs" 给孙组件 代传递父组件中的数据，在孙组件中之间用 {{$attrs.属性名}} 的方式使用 父组件中的数据
|
|||
|
|
六、使用 ref 属性的方式 父组件 ref="childComp" this.$refs.childComp.属性名
|
|||
|
|
|
|||
|
|
lession 11、父子组件生命周期执行顺序问题
|
|||
|
|
|
|||
|
|
new vue() 生命周期
|
|||
|
|
|
|||
|
|
beforeCreate()
|
|||
|
|
created()
|
|||
|
|
beforeMount()
|
|||
|
|
mounted()
|
|||
|
|
beforeUpdate()
|
|||
|
|
updated()
|
|||
|
|
beforeDestory()
|
|||
|
|
destroyed()
|
|||
|
|
|
|||
|
|
简化
|
|||
|
|
|
|||
|
|
created()
|
|||
|
|
mounted()
|
|||
|
|
updated()
|
|||
|
|
destroyed()
|
|||
|
|
|
|||
|
|
存在父子组件的生命周期
|
|||
|
|
|
|||
|
|
parent:App created
|
|||
|
|
child:List created
|
|||
|
|
child:List mounted
|
|||
|
|
parent:App mounted
|
|||
|
|
|
|||
|
|
结论：页面创建的时候 先父后子 挂载组件的顺序先子后父
|
|||
|
|
parent:App before update
|
|||
|
|
child:List before update
|
|||
|
|
child:List updated
|
|||
|
|
parent:App updated
|
|||
|
|
|
|||
|
|
结论：组件更新顺序 先父后子 更新完成的顺序 先子后父
|
|||
|
|
|
|||
|
|
lession 12、
|
|||
|
|
|
|||
|
|
1.nextTick 会在异步渲染完成后执行
|
|||
|
|
2.异步渲染是批量进行渲染的
|
|||
|
|
this.$nextTick(()=>{
|
|||
|
|
const ulElem=this.$refs.ulRef;
|
|||
|
|
const length=ulElem.childNodes.length;
|
|||
|
|
console.log('length',length)
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
lession 13、slot 插槽
|
|||
|
|
|
|||
|
|
lession 14、vue3 和 vue2 的区别
|
|||
|
|
|
|||
|
|
Diff算法是如何实现的
|
|||
|
|
|
|||
|
|
配置项api options api
|
|||
|
|
配置项型代码风格
|
|||
|
|
|
|||
|
|
很分散，逻辑不内聚，解决了耦合，没有解决
|
|||
|
|
组合式api composition API
|
|||
|
|
解决了高内聚问题
|
|||
|
|
|
|||
|
|
import {ref} from 'vue'
|
|||
|
|
|
|||
|
|
const useCmpute=(count)=>{
|
|||
|
|
const plus=()=>{
|
|||
|
|
count++;
|
|||
|
|
}
|
|||
|
|
const minus=()=>{
|
|||
|
|
|
|||
|
|
count--
|
|||
|
|
}
|
|||
|
|
return {
|
|||
|
|
plus,minus
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
setup(){
|
|||
|
|
const cout=ref(0);
|
|||
|
|
{plus,minus}=useCompute(count);
|
|||
|
|
return {
|
|||
|
|
count,plus,minus
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
总结：
|
|||
|
|
1. vue2和vue3双向数据绑定原理发生了改变
|
|||
|
|
vue2 的双向数据绑定是利用ES5 的一个 API Object.definePropert()对数据进行劫持 结合 发布订阅模式的方式来实现的
|
|||
|
|
vue3 中使用了 es6 的 ProxyAPI 对数据代理。
|
|||
|
|
|
|||
|
|
相比于vue2.x，使用proxy的优势如下
|
|||
|
|
|
|||
|
|
defineProperty只能监听某个属性，不能对全对象监听
|
|||
|
|
可以省去for in、闭包等内容来提升效率（直接绑定整个对象即可）
|
|||
|
|
可以监听数组，不用再去单独的对数组做特异性操作 vue3.x可以检测到数组内部数据的变化
|
|||
|
|
|
|||
|
|
2. 默认进行懒观察（lazy observation）。
|
|||
|
|
在 2.x 版本里，不管数据多大，都会在一开始就为其创建观察者。当数据很大时，这可能会在页面载入时造成明显的性能压力。3.x 版本，只会对「被用于渲染初始可见部分的数据」创建观察者，而且 3.x 的观察者更高效。
|
|||
|
|
|
|||
|
|
3. 更精准的变更通知。
|
|||
|
|
比例来说：2.x 版本中，使用 Vue.set 来给对象新增一个属性时，这个对象的所有 watcher 都会重新运行；3.x 版本中，只有依赖那个属性的 watcher 才会重新运行。
|
|||
|
|
|
|||
|
|
4. 3.0 新加入了 TypeScript 以及 PWA 的支持
|
|||
|
|
5.vue2和vue3组件发送改变
|
|||
|
|
|
|||
|
|
|
|||
|
|
reactivity API
|
|||
|
|
|
|||
|
|
Vue2使用选项类型API（Options API）
|
|||
|
|
|
|||
|
|
Vue3合成型API（Composition API）
|