文章目录
一、基础语法
1.vue中this指向问题
事实上Vue的源码当中就是对methods中的所有函数进行了遍历，取出每一个函数，并且通过bind绑定了this
2.mustache语法
data返回的对象是有添加到Vue的响应式系统中。
data中的数据发生改变时，对应的内容也会发生更新
Mustache中不仅仅可以是data中的属性，也可以是一个JavaScript的表达式（除了判断语句和赋值语句）
3.不常用指令
v-once：用于指定元素或者组件只渲染一次
- 当数据发生变化时，元素或者组件以及其所有的子元素将视为静态内容并且跳过
- 该指令可以用于性能优化
- 父节点绑定v-once，所有的子节点，也是只会渲染一次
v-text：更新元素的 textContent相当于mustache语法
v-html：展示的内容本身是 htm可以解析HTML
v-pre：用于跳过元素和它的子元素的编译过程，显示原始的Mustache标签
- p跳过不需要编译的节点，加快编译的速度
4.常用指令
v-bind （绑定属性类名样式等）
-（简写冒号），绑定一个或者多个属性，或者向另外一个组件传值
-
绑定属性（img中的src）
-
绑定类名（1.普通绑定2.对象形式，对象绑定可以多个绑定3.绑定对象4.绑定方法，从方法中获取）
-
绑定样式:style=“{‘color’:‘red’,‘font-size’:‘40px’}”
v-on(绑定时间交互) -
简写@符号，@+时间名称
-
绑定函数 @click=“函数名” 传参 @click=“函数名（$event,‘why’）”
函数（event）{
console.log(event)
} -
修饰符
v-if v-else v-else if(条件渲染) -
根据布尔值进行渲染
-
这三个同时存在只会执行一个
-
条件为false时，其判断的内容完全不会被渲染或者会被销毁掉
template元素（结合条件判断语句） -
为v-if是一个指令，所以必须将其添加到一个元素上，此时我们渲染div，但是我们并不希望div这种元素被渲染
-
template元素可以当做不可见的包裹元素（类似html中的template标签）
v-show
- 通过控制CSS中的display进行元素的显示和隐藏
面试题：
一、v-show和v-if的区别
1.用法上，v-if可以和template标签一个使用，v-show不能和v-else一起使用
2.本质上，v-if当条件为false时对应的原生元素根本不会被渲染到DOM 中去
3.开发中，所需要的原生元素需要在显示和隐藏不断的来回切换就要使用v-show，减少重排和重绘，不会频繁切换就使用v-if
二、重排和重绘
1.浏览器关键渲染路径 : DOM\CSSDOM > 生成渲染树 > 通过布局layout步骤确定页面上所有的内容大小和位置 > 确定布局之后绘制（pint）到屏幕上
2. 重排和重绘都是浏览器关键渲染路径的两个节点，浏览器关键渲染路径就是DOM和CSS生成渲染树，然后根据渲染树通过一个布局（layout）步骤来确定页面上的所有内容大小和位置，确定布局之后，将像素绘制到paint屏幕上。
3. 重排是当元素的位置结构发生变动的时候，浏览器重新执行布局这个步骤，来重新确定页面上的内容和大小，确定完之后就会重新绘制到屏幕上，所以重排一定会导致重绘
4.如果元素的位置没有发生变动，仅仅是样式发生变动，此时浏览器的渲染步骤会跳过布局步骤，直接进入绘制步骤，这个过程就是重绘，所以重绘不一定会导致重排。
三、v-for中的key是什么作用？
1.key属性主要用在Vue的虚拟DOM算法，在新旧nodes（节点）对比时辨识VNodes（virtul node 虚拟节点）
2.Vue事实上会对于有key和没有key会调用两个不同的方法；有key，那么就使用 patchKeyedChildren方法,没有key，那么久使用 patchUnkeyedChildren方法，有了key作为表示diff算法的作用更加明显
四、当数据发生变化时，vue是怎么更新节点的？
- 我们先根据真实DOM生成一颗virtual DOM，当virtual DOM某个节点的数据改变后会生成一个新的Vnode，然后Vnode和oldVnode作对比（此时就是diff算法），发现有不一样的地方就直接修改在真实的DOM上，然后使oldVnode的值为Vnode。
- diff的过程就是调用名为patch的函数，比较新旧节点，一边比较一边给真实的DOM打补丁（添加新节点）
五、virtual DOM和真实DOM的区别？
virtual DOM是将真实的DOM的数据抽取出来，以对象的形式模拟树形结构
VNode和oldVNode都是对象
v-for（列表渲染）
在真实开发中，我们往往会从服务器拿到一组数据，并且需要对其进行渲染，v-for类似于JavaScript的for循环，可以用于遍历一组数据。
- v-for的基本格式是 “item in 数组”： p数组通常是来自data或者prop，也可以是其他方式；
- item是我们给每项元素起的一个别名，这个别名可以自定来定义
v-for同时也支持数字的遍历：p每一个item都是一个数字；
数组更新检测
vue将数组变更的方法进行了包裹，会触发视图的更新，包裹过的方法有
push()pop()unshift()shift()splice()sort()reverse()
上面的方法会直接修改原来的数组，但是某些方法不会替换原来的数组，而是会生成新的数组，比如 filter()、concat() 和 slice()。
5.虚拟DOM+diff算法
- 虚拟节点：事实上，无论是组件还是元素，它们最终在Vue中表示出来的都是一个个VNode，VNode的本质是一个JavaScript的对象
- 虚拟DOM：如果我们不只是一个简单的div，而是有一大堆的元素，那么它们应该会形成一个VNode Tree
- diff算法：
- 比较方式：在采取diff算法比较新旧节点的时候，比较只会在同层级进行, 不会跨层级比较
- 当数据发生改变时，set方法会让调用Dep.notify通知所有订阅者Watcher，订阅者就会调用patch给真实的DOM打补丁，
二、内置Api
1.computed
- 任何包含响应式数据的复杂逻辑，记住它是一个属性里面绑定的不是方法，方法是methods里面书写，因此在调用computed里面的属性时，不用添加（）
主要用于数据的复杂处理逻辑
1.模板语法
- 模板中存在大量的逻辑，不方便维护
- 当有多次一样的逻辑，存在大量的代码
- 多次使用的时候，很多运算也多次运行，没有缓存，损耗性能
2.methods- 我们只需要一个结果的计算，但是都会变成方法的调用
- 不存在缓存，很多运算也要多次运行
优势：缓存
p这是因为计算属性会基于它们的依赖关系进行缓存；
p在数据不发生变化时，计算属性是不需要重新计算的；
p但是如果依赖的数据发生变化，在使用时，计算属性依然会重新进行计算；
计算属性的setter和getter
只需要一个getter方法即可，所以我们会将计算属性直接写成一个函数。 n 但是，如果我们确实想设置计算属性的值呢？
p这个时候我们也可以给计算属性设置一个setter的方法；
源码如何对setter和getter处理
Vue内部是如何对我们传入的是一个getter，还是说是一个包含setter和getter的对象进行处
理的呢？
p事实上非常的简单，Vue源码内部只是做了一个逻辑判断，判断是否是函数，是函数就直接取get，不是就是会在option中取get和set
侦听器watch
v-model
全局组件和局部组件
打包项目（vuecli,webpack）
SFC：单文件
webpack在node环境中
vite
Webpack是目前整个前端使用最多的构建工具，但是除了webpack之后也有其他的一些构建工具：
p比如rollup、parcel、gulp、vite等等