Vue 中事件绑定的原理
Vue 的事件绑定分为： 原生事件绑定、组件事件绑定
原生 dom 事件的绑定，采用 addEventListener 实现
组件绑定事件采用的是 $on 方法
v-model 的实现原理
可以看成是 v-bind:value 加上 v-on:input 事件 的语法糖
v-model 如何自定义？
让父组件的 appValue 与子组件的 change 事件绑定。
子组件内自定义 model:{prop,event}
<!-- 父组件 -->
<HelloWorld v-model="appValue" @changeEvent="mychange" />
<button @click="appValue = !appValue">change</button>
<!-- 子组件 -->
<template>
<div>
<input
type="checkbox"
:checked="mycheck"
@change="$emit('changeEvent', $event.target.checked)"
/>
{{ mycheck }}
</div>
</template>
<script>
export default {
model: {
prop: "mycheck",
event: "change",
},
props: {
mycheck: false,
},
};
</script>
Vue 中的 v-html 会导致哪些问题？
- 可能会导致 XSS 攻击
- v-html 会替换掉标签内部的子元素
XSS 攻击通常指的是通过利用网页开发时留下的漏洞，通过巧妙的方法注入恶意指令代码到网页，使用户加载并执行攻击者恶意制造的网页程序。
<!-- 导致xss攻击 -->
<input type="text" v-model="msg" />
<div v-html="msg"></div>
<!-- input里如果被输入 <img src onerror="alert(document.cookie)" /> -->
Vue 组件通信
- 父子间： 父 -> 子 props、 子 -> 父 $on $emit
- 获取父子组件实例：$parent 、$children
- 利用 ref 调用组件的属性、方法
- Event Bus 实现跨组件通信
- Vuex 状态管理实现通信
- 在父组件中提供数据子组件进行消费 Provide、inject。 这种是写插件用的，开发时用的比较少
Vue 中相同逻辑如何抽离？
- Vue.mixin 用法，给组件每个生命周期、函数等都混入一些公共逻辑
// 定义 minxin
let MIXIN = {
data() {
return {
name: "mixin",
};
},
created() {
console.log("mixin...", this.name);
},
mounted() {},
methods: {},
};
export default MIXIN;
//引用mixin的 2 种方式
//1.1 全局引用
import mixin from "./mixin";
Vue.mixin(mixin);
//1.2 在vue文件中引用
import "@/mixin"; // 引入mixin文件
export default {
mixins: [mixin],
};
为什么要使用异步组件？
- 如果组件多，打包出的结果也会变大，用异步的方式来加载组件，可以实现文件的分割加载。
- 主要依赖 import 这个语法。
components: {
AddCustomer: () => import("../components/AddCustomer");
}
谈谈你对 keep-alive 的了解？
keep-alive 可以实现组件的缓存，当组件切换时，不会卸载组件，常用的 2 个属性是 include/exclude。
2 个重要的生命周期是： activated(){} , deactivated(){}
Vue3.0 有哪些改进？
- Vue3 采用 TS 来编写
- 支持 Composition API（setup 函数）
- Vue3 中响应式数据原理改成了 proxy
- vdom 的对比算法更新，只更新 vdom 的绑定了动态数据的部分
实现 hash 路由和 history 路由
- hash : onhashchange
- history : history.pushState