黑马程序员技术交流社区

标题: Vue理解 之1.0版 [打印本页]

---

作者: 天树123    时间: 2020-5-6 11:09
标题: Vue理解 之1.0版
1、v-show和v-if的区别

v-show 通过 css display 控制显示和隐藏的
v-if 是组件真正的渲染和销毁，不是显示和隐藏
频换切换的时候使用 v-show , 否则使用 v-if

2、v-for中key的作用
diff 算法中通过 tag 和 key 来判断是否是 sameNode ，减少渲染次数，提升渲染性能。key 必须使用的 不能是 index 和 random 。
3、v-for 和 v-if不能同时使用
v-for 比v-if计算优先级高 而且如果每一次都需要遍历整个数组，将会影响速度，
解决方案 使用计算属性 computed 或者在父级标签判断
4、vue的生命周期（有父子组件的情况）
主要有三个阶段：

创建阶段（注册实例与挂载）： beforeCreate、created、beforeMount、mounted
更新阶段：beforeUpdate、updated
注销阶段：beforeDestroy、destroyed

单个组件的生命按正常的顺序执行。这里主要说一下父子组件的情况

创建阶段： 父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted
子组件更新过程： 父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated
父组件更新过程：父 beforeUpdate -> 父 updated
销毁过程： 父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

5、vue组件如何通讯

父子组件：父子沟通用的是props，子父沟通用的是 this.$emit
自定义事件： event.off event.$emit
vuex

6、对 mvvm 的理解
view -> viewModel -> model
view <- viewModel <- model
view: DOM
model: javascript Objects
viewModel: vue (DOM listeners 和 directives )
7、双向数据绑定v-model 的实现原理
v-model 是一个语法糖真正实现是靠 v-bind绑定响应式数据和触发oninput 事件并传递数据实现，

input 元素的 value = this.name
绑定 input 事件 this.name = $event.target.value
data 更新出发 re-render

自定义 v-model

定一个 props ,在 model 中 关联 prop:"自己定义的属性默认为 value ", enent:"事件名称默认为 input "

8、$nextTick
异步渲染，将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。
9、slot
1）、什么是插槽？

插槽（Slot）是Vue提出来的一个概念，正如名字一样，插槽用于决定将所携带的内容，插入到指定的某个位置，从而使模板分块，具有模块化的特质和更大的重用性。
插槽显不显示、怎样显示是由父组件来控制的，而插槽在哪里显示就由子组件来进行控制

2）、默认插槽
父组件
<template>
  <div>
    我是父组件
    <slotOne1>
      <p style="color:red">我是父组件插槽内容</p>
    </slotOne1>
  </div>
</template>

在父组件引用的子组件中写入想要显示的内容（可以使用标签，也可以不用）
子组件(slotOne1)
<template>
  <div class="slotOne1">
    <div>我是slotOne1组件</div>
    <slot></slot>
  </div>
</template>

在子组件中写入slot，slot所在的位置就是父组件要显示的内容
3）、具名插槽
子组件
<template>
  <div class="slottwo">
    <div>slottwo</div>
    <slot name="header"></slot>
    <slot></slot>
    <slot name="footer"></slot>
  </div>
</template>

在子组件中定义了三个slot标签，其中有两个分别添加了name属性header和footer
父组件
<template>
  <div>
    我是父组件
    <slot-two>
      <p>啦啦啦，啦啦啦，我是卖报的小行家</p>
      <template slot="header">
          <p>我是name为header的slot</p>
      </template>
      <p slot="footer">我是name为footer的slot</p>
    </slot-two>
  </div>
</template>

在父组件中使用template并写入对应的slot值来指定该内容在子组件中现实的位置（当然也不用必须写到template），没有对应值的其他内容会被放到子组件中没有添加name属性的slot中
4）、作用域插槽
子组件
<template>
  <div>
    我是作用域插槽的子组件
    <slot :data="user"></slot>
  </div>
</template>

<script>
export default {
  name: 'slotthree',
  data () {
    return {
      user: [
        {name: 'Jack', sex: 'boy'},
        {name: 'Jone', sex: 'girl'},
        {name: 'Tom', sex: 'boy'}
      ]
    }
  }
}
</script>

在子组件的slot标签上绑定需要的值
父组件
<template>
  <div>
    我是作用域插槽
    <slot-three>
      <template slot-scope="user">
        <div v-for="(item, index) in user.data" :key="index">
        {{item}}
        </div>
      </template>
    </slot-three>
  </div>
</template>

在父组件上使用slot-scope属性，user.data就是子组件传过来的值

10、keep-alive

缓存组件
频繁切换，不需要重新渲染
Vue的性能优化

Props：

include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
max - 数字。最多可以缓存多少组件实例。

<!-- 基本 -->
<keep-alive>
  <component :is="view"></component>
</keep-alive>

<!-- 多个条件判断的子组件 -->
<keep-alive>
  <comp-a v-if="a > 1"></comp-a>
  <comp-b v-else></comp-b>
</keep-alive>

<!-- 和 `<transition>` 一起使用 -->
<transition>
  <keep-alive>
    <component :is="view"></component>
  </keep-alive>
</transition>
include 和 exclude prop 允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示：
<!-- 逗号分隔字符串 -->
<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>

<!-- 正则表达式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>

<!-- 数组 (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']">
  <component :is="view"></component>
</keep-alive>

max：最多可以缓存多少组件实例。一旦这个数字达到了，在新实例被创建之前，已缓存组件中最久没有被访问的实例会被销毁掉。
<keep-alive :max="10">
  <component :is="view"></component>
</keep-alive>

11、vuex
state：  数据仓库，唯一数据源
getters：  store 的计算属性。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
action： Action 提交的是 mutation，而不是直接变更状态。Action 可以包含任意异步操作。
mutation： 更改 Vuex 的 store 中的状态的唯一方法

用于组件中的

dispatch：
commit：
mapState：
mapGetters：
mapActions：
mapMutations：

未完待续.....

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2