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） |