Vue原理笔记3

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