10.11.56.46:1
一、开发流程以及Vue的基本语法01day230105
-
什么是虚拟DOM
虚拟DOM是真实DOM的映射，映射成object，使用object描述节点的各种信息，然后在通过render方法将其渲染成真实的DOM节点，用JSON模拟真是的DOM，用来提升性能优势：虚拟DOM是相对于浏览器所渲染出来的真实dom而言的，在React和vue等技术出现之前，我们要改变页面结构只能通过遍历查询dom树的方式找到需要修改的dom然后在修改样式行为或者结构。相对于真实的dom树节省性能
-
Vue的设计模式是什么,原理是什么？
MVC模式：模型、视图、控制器
将业务、数据、视图分离的方式组织架构代码，方便开发和维护
MVP模式：模型、视图、管理器
所有层次的交互都发生在管理层，从而降低了模型层和视图层之间的耦合关系，提升了灵活性和复用性。所有的操作都在管理层，所以必须创建管理器才能实现需求
MVVM模式：模型、视图、视图模型层
开发者只需要通过操作html就能创建视图实现页面的需求，当视图层发生了数据的改变，通过data bingings监听并改变view层的数据，比如主流框架vue的底层原理就是MVVM模式 -
Vue的插值语法？(重新总结)
{{}}、v-text、v-html
能够自动读取data中定义的属性
v-text不能够解析标签
v-html能解析标签 -
组件化编程的优势？
提高了代码的复用率
提高了运行速度 -
什么是响应式数据？
能够捕获到数据的变更
变更数据后会自动更新所有依赖于它的数据 -
v-if和v-show的区别？
v-if是真正的渲染,没有的代码中就没有
v-show是通过display:none来控制，代码中有该标签通过none隐藏了不显示 -
双向绑定的原理？
给输入框绑定输入事件
触发输入事件，修改响应式数据
响应式数据发生了修改，触发setter函数
在setter函数中，找使用了setter函数的DOM，修改DOM内容 -
vue的常用指令
text、html、if、else、if-else-if、show、for、pre、once、clock、model、bind、slot
四、23/1/9
-
什么是双向数据绑定，什么原理
给输入框绑定输入事件
触发输入事件，修改响应式数据
响应式数据发生了修改，触发了setter函数
在setter函数中，找使用了setter函数的DOM，修改了DOM内容 -
如何创建vue实例，如何挂载到页面
需要引入vue文件，然后const app = Vue.createApp()
挂载：app.mount(“.app”) -
什么是数据劫持
拦截数据的访问和修改，在数据被其他程序访问和修改时，执行附带的其他自定义功能
如何实现：自定义实现：自定义数据的访问方法和修改方法
get和set关键字 -
什么是虚拟DOM，为什么要使用DOM
虚拟DOM是真实DOM 的映射，映射成object，使用object描述节点的各种信息，然后通过render方法将其渲染成真是DOM节点，用JSON模拟真实的DOM，用来提升性能 -
如何设置响应式数据，如何设置方法
v-model，data methods
能够捕获到数据的变更
变更数据后会自动更新所依赖于它的数据 -
计算属性和方法的区别是什么
同等条件下，计算属性会基于数据的响应式依赖进行缓存，要优于方法
计算属性只有在原始数据发生改变时才回重新执行
方法会在每次使用时都会重新执行 -
简单介绍watch的使用和特点
watch:{
msg(newVal,oldVal){
···
}
}
浅层次侦听器：被侦听的属性，仅在被赋新值的时候才会触发回调函数，而多层次嵌套属性的变化不会被触发
深层次要加handler方法和deep:true选项
deep：true，是否深层次的监听
immediate:true初始的时候立即执行一次
flush："post"侦听的执行执行时机为post表示在数据更新之后 -
vue有哪些常见的事件修饰符
.stop阻值事件冒泡
.prevent阻止默认事件
.capture使用事件捕获
.self只有evnet.target是当前元素时才会触发
.once只有触发一次事件 -
在vue事件模块中如何获取事件对象
在事件处理方法中用event接收
在行内使用$event传参 -
vue有哪些常见的表单修饰符
键盘修饰符：
.enter查找回车键
.tab查找tab键
.delete查找删除键
.esc查找esc键
.space查找空格键
.up查找上键
.down查找下键
.left查找左键
.right查找右键
系统修饰符：(用来做组合键的系统按键win键配合)
.ctrl
.alt
.shift
.meta
鼠标按键修饰符
.left
.right
.middle
表单修饰符：
.lazy发生了change事件之后进行同步(默认情况是使用v-model同步数据)
.number自动将用户输入的内容转为数值类型，可以给v-model添加number修饰符
.trim是用来过滤用户输入的首位空白字符 -
简单介绍什么是组件，优势
组件就是对数据和方法的简单封装，可以有自己的属性和方法，
优势：实现拖拽式编程、快速的属性处理以及真正的面向对象的设计，可以复用代码 -
vue的生命周期有哪些状态对应哪些钩子函数
beforeCreate创建
createdbeforeMount挂载
mountedbeforeUpdate更新
updatedbeforeUnmount写在
Unmounted声明周期对应的钩子函数，在生命周期前加on
补充：
onActivated:注册一个回调函数，若组件是缓存树的一部分，当组件被插入到DOM中时被调用
onDectiveted：注册一个回调函数，若组件实例是缓存树的一部分，当组件从DOM中被移除时调用
五、23/1/10
-
父子、兄弟组件如何传值？
父传子
父组件在调用子组件的位置添加自定义属性，属性的值就是父组件传入子组件的值
在子组件配置对象，添加一个props选项，用来接收传过来的数据
注意：如果传入的值是一个非字符的数据，需要绑定属性v-bind:
选项卡默认是一个数组，数组的元素就是：父组件在调用子组件的位置定义的属性名
子传父
父组件在调用子组件的位置绑定自定义事件。
该事件的处理方式由父组件定义。方法接收的参数是子组件发过来的数据
在子组件的某个事件或行为中，使用$emit触发自定义事件，并且传递数据
事件声明是可选的，推荐声明要触发的事件
兄弟传值
自定义事件系统
在要接收数据的组件内部，通过on绑定事件（事件名，事件处理函数）
在要发送数据的组件内部，通过emit触发事件（事件名，要发的数据）
自定义事件系统：
const E = {
msg:{},
on(type, cb){
if(this.msg[type]){
this.msg[type].push(cb);
}else{
this.msg[type] = [cb];
}
},
emit(type){
if(!this.msg[type]) return;
const arg = […arguments].slice(1);
this.msg[type].forEach(val=>{
val(…arg);
})
}
} -
如何定义具名插槽？
在组件的模板内，添加一个标记，组件标签的内容渲染到slot标签的位置
在模板中的中写那么属性及名字，在子组件中用中用v-slot：a和模板中的位置对应 -
兄弟组件有哪些传值方式？
中央总线(自定义事件系统)
利用父子组件传值子A传给父，父再传给子B
借助第三方插件：mitt -
什么是透传attribute
透传指的是：传递给一个组件，却没有被该组件的接收，就会添加到根元素上。常见的有class、style、v-on
如果一个子组件的根元素已经有了class或style，它会会合并 -
如何实现依赖注入
用于祖先组件向其所有子孙后代注入一个依赖
provide选项是一个函数，返回一个对象，对象的key为要注入的数据名，对象的value为要注入的数据
inject选项是一个数组，数组内的成员为要引入的祖先组件注入的数据名 -
如何注册全局组件：component
步骤：
创建模板：app.component(组件名，配置对象)
配置组件对象：全局的配置对象比根的配置对象多了template。与模板产生关联 -
如何注册局部组件：components
步骤：
是在某个组件下使用components选项，这个选项也是一个对象{组件名：配置对象} -
什么是单向数据流
所有的props都遵循单向绑定原则，只能在父组件更新，子组件不能更新数据
改变的场景：
定义一个新的局部属性，从props上获取初始值
对基于props的值定义一个计算属性 -
什么是双向数据绑定
给输入框绑定一个输入事件
触发输入事件，修改了响应式数据
响应式数据发生了修改，触发了setter函数
在setter函数中，找使用了stter函数的DOM，修改DOM的内容 -
v-if和v-show的区别
if是真正的渲染，页面中不会出现元素
show是通过display：none来控制元素的显示和隐藏 -
计算属性和侦听器的区别
同等条件下，计算属性优于侦听器
计算属性可以更方便的解决数据计算的问题
侦听器可以针对性的监听一个数据的变化，执行相对应的功能，不只是计算数据 -
计算属性和方法的区别
属性是只有数据发生改变是才会重新执行
方法是每次都会执行 -
生命周期的状态和钩子函数
创建：beforeCreate、created
挂载：beforeMount、mounted
更新：beforeUpdata、updated
卸载：beforeUnmount、unmounted -
vue实例身上有哪些全局方法
createApp
component
mount
unmount
props
六、1.11
-
ref和reactive
ref是响应式基本数据，基本数据被ref方法包裹后更新是需要通过value属性进行修改
reactive响应式复杂数据。会影响到所有嵌套的属性 -
watch 和 watchEffect
watch侦听器，用于监听数据的变化。
返回值：用于清除该侦听器的函数
参数：
实参1：响应式数据，要侦听的原数据
实参2：数据变化时要执行的回调函数(形参1：新值，形参2：老值)
实参3：配置对象，是否立即执行、是否深层次监听、是否在dom更新后执行
watchEffect侦听器，会在侦听器开启后立即执行一次
参数：回调函数 -
什么叫单文件组件(SFC)
以.vue结尾的叫单文件组件
里面大致分为三部分：控制逻辑
控制模板
控制样式 -
什么是组合式API？
组合式API是是一系列API的集合，使我们可以使用函数而不是选项卡的方式写API的集合，概括了响应式API，生命周期钩子，注入依赖 -
组合式API和选项式API 的区别？
选项式API是包含多个选项的对象来描述组件的逻辑
组合式API是与
扫一扫
6131
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
