Vue部分重要知识点

事件修饰符

1. prevent: 阻止默认事件（常用）
2. stop:阻止事件冒泡（常用）
3. once: 事件只触发一次（常用）
4. capture：使用事件的捕获1模式
5. self：只有event.target 是当前操作的元素时才触发
6. passive：事件的默认行为，立即执行，无需等待事件回调执行完毕

点击我显示提示信息 // 等价与event.prevent

键盘事件

1. @keyup.enter 按下回车 delete 删除退格、esc退出、space空格、 tab换行、up上、down下、left左、right右
2. 系统修饰键 ctrl、alt、shift、meta （win键）

• 配合keyup 按下修饰符的同时再按下其他键、随后释放其他键，事件才触发
• 配合keydown 正常触发事件

3. e.key 键名、e.keyCode键值（编码值）

scoped

渲染规则

Vue 对 scoped的渲染规则

对于所有的 Vue 组件，只要设置了，Vue就会给该组件生成一个唯一data值。
Vue 会将data值作为一个属性添加到组件内所有HTML的DOM节点

如果组件内部包含子组件，这有两种情况:

• 情况一：子组件没有设置，则只会给子组件的最外层标签加上当前组件的data属性
• 情况二：子组件设置了，则子组件会自动生成一个自己的唯一data值，然后子组件最外层标签在自己的data属性后面添加父组件的data属性。

对于组件内写在里的样式，Vue均会自动在每句css选择器的末尾添加一个当前组件的data属性选择器来私有化样式。
基于以上，Vue就实现的scoped的功能。因为，组件scoped里的样式都加了当前组件的唯一标识data属性。也就是说，即使当前组件的class跟其他组件重名，因为每个组件的data属性不一样，当前组件的样式也就不能再其他组件生效了。

渲染规则证明：

规则一：对于所有的 Vue 组件，只要设置了，Vue就会给该组件生成一个唯一data值。

对于这一点的证明，很容易。我们知道，一般的，Vue 入口文件App.vue里的样式是默认全局样式的，也就没有添加****。所以，编译出来的结果如下图：

那在****添加scoped属性后呢？

可见App.vue编译后，增加里data属性。由此可知，组件的data属性存在是依据scoped来控制的。

规则二：Vue 会将data值作为一个属性添加到组件内所有HTML的DOM节点

规则三：如果组件内部包含子组件，这有两种情况

• 情况一：子组件没有设置****，则子组件会自动生成一个自己的唯一data值，然后子组件最外层标签在自己的data属性后面添加父组件的data属性。

规则二、三结合来证明：
用上面的例子来证，展开App.vue组件得：

App.vue全部HTML的DOM标签都添加的data属性。
仔细看上图，我们发现，

标签有两个data属性而且App.vue的data属性在后面。这是应为该标签为Home.vue的最外层标签，而且也添加。如下图：

由此可证，子组件设置了****后，编译结果如下：

**

**标签的data属性只剩下App.vue的了。所以可证，子组件没有设置，则只会给子组件的最外层标签加上当前组件的data属性

• 规则四：对于组件内写在****里的样式，Vue均会自动在每句css选择器的末尾添加一个当前组件的data属性选择器来私有化样式。
• 对于这一点，我们直接看控制台可知：

混合mixin

概念

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

将组件的公共逻辑或者配置提取出来，哪个组件需要用到时，直接将提取的这部分混入到组件内部即可。这样既可以减少代码冗余度，也可以让后期维护起来更加容易。
这里需要注意的是：提取的是逻辑或配置，而不是HTML代码和CSS代码。其实大家也可以换一种想法，mixin就是组件中的组件，Vue组件化让我们的代码复用性更高，那么组件与组件之间还有重复部分，我们使用Mixin在抽离一遍。
简单栗子局部混合：

// mixin.js
export const hh1 = {
  methods: {
    showName() {
      alter("zhuba");
    }
  },
  mounted() {
    console.log("你好鸭！");
  },
}

export const hh2 = {
  data() {
    return {
      x:100, //如果导入组件中也有，以组件中为data
      y:200,
    }
  }
}

// Vue1.vue 和 // Vue2.vue
<script>
import {hh1, hh2} from '../mixin';
mixins:[hh1, hh2];
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

局部混入和全局混入

局部混入和组件的按需加载有点类似，就是需要用到mixin中的代码时，然后再在组件章引入它。
全局混入的话，则代表在项目的任何组件中都可以使用mixin。
局部mixin是在需要的组件中引入它，也可以在全局先把它注册好，这样就可以在任何组件中直接使用了。

// 局部混入 在相应app中
<script>
import {hh1, hh2} from '../mixin';
mixins:[hh1, hh2];
</script>

// 全局混入 app.js中 修改app(main).js
import Vue from "vue";
import App from "./App.vue";
import { mixins } from "./mixin";
Vue.mixin(mixins);

Vue.config.productionTip = false;

new Vue({
  render: (h) => h(App),
}).$mount("#app");
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

特性

• mixin中的生命周期函数会和组件的生命周期函数一起合并执行。
• mixin中的data数据在组件中也可以使用。
• mixin中的方法在组件内部可以直接调用。
• 生命周期函数合并后执行顺序：先执行mixin中的，后执行组件的。
• 一个组件中改动了mixin中的数据，另一个引用了mixin的组件不会受影响

冲突解决

• 先执行mixin中生命周期函数中的代码，然后再执行组件内部的代码
• 当mixin中的data数据与组件中的data数据冲突时，组件中的data数据会覆盖mixin中数据，
• 最终在组件中调用时，实际调用的是组件中的方法。

优缺点

优点

• 提高代码复用性
• 无需传递状态
• 维护方便，只需要修改一个地方即可

缺点

• 命名冲突
• 滥用的话后期很难维护
• 不好追溯源，排查问题稍显麻烦
• 不能轻易的重复代码

props

props使用

props配置