天行健君子以自强不息网站建设,南京做网站找哪家好,无锡网站开发培训,网站性质一、vue基础用法
mvvm的了解/认知
语义化模板mvc - model view controllermvvm - model view view-model
vue是如何利用mvvm思想进行开发
双向数据绑定
花括号#xff0c;构建了数据与视图的双向绑定通过视图绑定事件#xff0c;来处理数据
生命周期-vue示例
建立构建了数据与视图的双向绑定通过视图绑定事件来处理数据
生命周期-vue示例
建立beforeCreatecreatedbeforeMountmounted更新beforeUpdateupdated销毁beforeDestorydestoryed
生命周期-过程
bCnew Vue() - 实例挂载功能cdata、props、methods、computed - 数据操作不涉及vdom和dombMvDom - 围绕vDom做的数据操作但是不涉及dommdom-任何操作bUbDom更新了的但是dom还没更新-可以更新数据udom已经更新了但是谨慎操作数据bD实例vm尚未被销毁-eventBus、store、计时器销毁d实力完全被销毁-收尾
定向监听 watch和computed
相同点
基于vue的依赖收集机制都是被依赖的数据发生变化触发进而进行改变 、处理计算
不同点
入和出 computed多入单出-多个值变化组成一个值的变化 watch单入多出-单个值的变化进而影响一系列的变更。这里的多出指的是在声明的watch变量中可以针对某一个变量的变化改变其他变量的值性能上 computed会自动diff依赖如果依赖没有变化则直接从缓存中读取值 watch无论监听值是否变化只能通过回调获取值写法上 computed必须有return watch可有可无有的话也不影响时机上 computed从首次生成就赋值开始运行了 watch首次默认不执行可以通过immediatetrue
条件v-if v-show v-else v-else-if
v-if无dom不会渲染实际节点和其子节点v-show存在实际节点和其子节点但不展示、不占位
v-forkey
v-for v-if 循环的优先级
在vue2.x中v-if和v-for同时使用v-for优先级更高 在vue3中v-if始终高于v-for
key的作用
模板编译原理 - template dom template匹配语法 — 生成AST虚拟树 静态 动态 转换AST为可执行方法 render() domkey作用 dom diff - 单层复用、双向指针、优先服用 key 快速识别节点的可复用
默认指令
v-once - 只渲染一次 v-text - 只渲染字符串 v-html -渲染html慎用防止攻击脚本的注入 v-model - 双向绑定 :value input
二、vue进阶
特征一模板化
插槽组件外部维护参数以及结构内部安排位置
面试点 默认插槽实现的方式 整个插槽的聚合(将所有的节点整合在一起插入到对应默认插槽的位置)问题 多个插槽节点分开布局 具名插槽
具名插槽 - 通过name标识插槽身份从而在组件内部区分
面试点 所有插槽都是通过name索引默认插槽其实通过”default“索引。name索引的其实是一段解析上下文的空间参数的传递、参数的隔离问题 插槽参数自管理 作用域插槽
作用域插槽
外部做结构描述勾勒内部做传参
结构化的传递jsx
//具名插槽
let slotNode_header (divvue header/div)
//作用域插槽
let scope_slot_content slotProps {return (div{slotProps}/div)}render() {return (// slotNode_headerscope_slot_content())
}App.vue
templatedivHelloWorld//默认插槽p{{msg1}}/pp{{msg2}}/pp{{msg3}}/p//具名插槽template v-slot:header{{headerMsg}}/template//作用域插槽template slotcontent slot-scope{slotProps}{{slotProps}}/template//作用域插槽新版本写法template v-slot:slotPropsslotProps{{slotProps}}/template/HelloWorld//div
templateHelloWorld.vue
templatediv//默认插槽slot/slot//具名插槽slot nameheader/slot//作用域插槽slot namecontent :slotPropsslotProps/slot/div
template
模板的二次加工
watch 、computed 数据与数据之间的加工复杂的模板相关数据计算 方案一函数methods | 过滤器filters) 过滤器拿不到实例方法二v-html - 逻辑运算 结构拼装 安全性方案三jsx优点和劣势 templaterendervm.render() diff key 直接绕过template使用render渲染但是强更新如果稍微有变量等变化的话会重新更新render函数 语法糖实现
options : [{value:1},{value:2}]
render(h){const Node (p{this.num100?100:this.num}/p)const handleChange (){}// return Nodereturn (ul{//v-forthis.options.map(item{return (//嵌入// itemNode/itemNode//v-modelitemNode item{item} value{item.value} onInput{this.handleChange}Node/ /itemNode)})}/ul)
}特征二组件化
Vue.component(component,{template:h1xxx/h1
})
new Vue({el:#app
})抽象复用精简
混入mixin - 逻辑混入
应用抽离公共逻辑逻辑相同模板不同可复用mixin合并策略 变量补充不会被覆盖生命周期在引用该mixin组件之前同样被引入的两个mixin根据引用顺序安排加载顺序
继承拓展extends-逻辑上的共同扩展
应用核心逻辑的功能继承合并策略 变量补充不会覆盖无论是业务代码还是mixin都在extends之后
extend.js
export default{data(){return {msg:xxx}},created(){console.log(extend) }
}helloword.vue
export default{mixins:[mixin1],extends:[extend]data(){return {msg:xxx}},created(){console.log(extend) }
}执行顺序extends mixin 引入组件
整体拓展类 - extend
从预定的配置中拓展出来一个独立的配置项进行合并 main.js
xxxxxx
new Vue({el:#app,component:{App},template:App/
})
//构造一个扩展器
let _baseOptions {data:function(){return {course:xx,session:vue}}
}
const BaseComponent Vue.extend(_baseOptions)
new BaseComponent({created(){console.log(extend componets)}
})以上方法基于vue2的写法vue3写法如下不再使用mixin,extends等拓展
addon.js
import {reactive} from vue
export default function addon(){const title xxxconst obj reactive({name:xxx,value:xxx})return {title,obj}
}引入方
script setup
import addon from addon.js
const {title:title1,obj:obj1} addon
/script
