首页 Vue正文

Vue常见知识点总结

景先 Vue 2018-12-05 1289 0

Vue常见知识点总结

v-show和v-if的区别

  • v-show通过css的display控制显示和隐藏
  • v-if组件真正的渲染和销毁,而不是显示和隐藏

为何在v-for中使用key

  • 必须使用key,且不能是index和random
  • diff算法中通过tag和key来判断是否是sameNode
  • 减少渲染次数,提高渲染性能

描述vue组件的生命周期

vue组件如何通讯

父子组件通信

父组件向子组件传值

  1. 创建子组件,在src/components/文件夹下新建一个Child.vue

  2. Child.vue的中创建props,然后创建一个名为message的属性

  3. 在App.vue中注册Child组件,并在template中加入child标签,标签中添加message属性并赋值

  4. 保存修改的文件,查看浏览器

  5. 我们依然可以对message的值进行v-bind动态绑定

此时浏览器中

父组件向子组件传值成功总结一下:

  • 子组件在props中创建一个属性,用以接收父组件传过来的值
  • 父组件中注册子组件
  • 在子组件标签中添加子组件props中创建的属性
  • 把需要传给子组件的值赋给该属性

子组件向父组件传值或更新父组件值

  1. 在子组件中创建一个按钮,给按钮绑定一个点击事件

  2. 在响应该点击事件的函数中使用$emit来触发一个自定义事件,并传递一个参数

  3. 在父组件中的子标签中监听该自定义事件并添加一个响应该事件的处理方法

  4. 保存修改的文件,在浏览器中点击按钮

子组件向父组件传值成功总结一下:

  • 子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件
  • 将需要传的值作为$emit的第二个参数,该值将作为实参传给响应自定义事件的方法
  • 在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听
  • 在通信中,无论是子组件向父组件传值还是父组件向子组件传值,他们都有一个共同点就是有中间介质,子向父的介质是自定义事件,父向子的介质是props中的属性。抓准这两点对于父子通信就好理解了

vue高级组件之provide / inject

provide / inject 是 2.2 新增的方法,可以以一个祖先组件向所有子孙后代注入依赖(一个内容)。

provider/inject:简单的来说就是在父组件中通过provider来提供变量,然后在子组件中通过inject来注入变量。

以上两者可以在父组件与子组件、孙子组件、曾孙子…组件数据交互,也就是说不仅限于prop的父子组件数据交互,只要在上一层级的声明的provide,那么下一层级无论多深都能够通过inject来访问到provide的数据

1.父级组件如下

<template>
    <div class="test">
        <son prop="data"></son>
    </div>
</template>

<script>
export default {
    name: 'Test',
    provide: {
        name: 'Garrett'
    }
}

2.孙子组件,注意这里是孙子组件,父级 -> 子组件 -> 孙子组件三个层级关系

<template>
    <div>
        {{name}}
    </div>
</template>

<script>
export default {
    name: 'Grandson',
    inject: [name]
}
</script>

这里可以通过inject直接访问其两个层级上的数据,其用法与props完全相同,同样可以参数校验等

过去用的 event-bus 虽然可以解决深层问题,但是会导致整个event-emit组成过于混乱,难以维护。使用 provide / inject 可以保证父子单向数据流的清晰性。

ReactContextProvider / Consumer 也有相同的效果,由于还没有具体使用过,对 React 本身也只有一面之缘,留待以后在了解,感兴趣的同学可以 阅读文档 了解。

当然它的作用还有很多,比如vue 路由参数变化,页面不刷新,provide /inject 完美解决方案

描述组件渲染和更新过程

  • 修改data触发更新
  • vue响应式 Object.defineProperty
  • 看看vDom,diif算法(On): tag不同删除重建,tag和key两者都相同,则视为相同节点
  • 模板编译 vue-template-compile

双向绑定v-model实现的原理

v-model本质上是 :value和v-on的结合体,就是绑定他的value,通过v-on触发,从而更新数据

版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。

评论