WebComponents 要学习下

    • Shadow DOM
    • Custom Elements
    • HTML Imports 废弃

    Vue组件与WebComponents区别

    • 兼容性
    • Vue 组件提供了纯自定义元素所不具备的一些重要功能，最突出的是跨组件数据流、自定义事件通信以及构建工具集成。
    UMD CommonJS ES Module (基于构建工具使用) ES Module (直接用于浏览器)
    完整版 vue.js vue.common.js vue.esm.js vue.esm.browser.js
    只包含运行时版 vue.runtime.js vue.runtime.common.js vue.runtime.esm.js -
    完整版 (生产环境) vue.min.js - - vue.esm.browser.min.js
    只包含运行时版 (生产环境) vue.runtime.min.js - - -
    • 完整版：同时包含编译器和运行时的版本。
    • 编译器：用来将模板字符串编译成为 JavaScript 渲染函数的代码。
    • 运行时：用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码。基本上就是除去编译器的其它一切。

    Vue生命周期
    image.png

    • CommonJS 和 ES Module 版本是用于打包工具的，因此我们不提供压缩后的版本。你需要自行将最终的包进行压缩。

    所以之前做的小程序埋点库 使用 rollup 打包不需要压缩

    webpack 4+ mode做了那些事情
    process.env.NODE_ENV = JSON.stringify('production')
    webpack 4+

    用 [key](https://cn.vuejs.org/v2/guide/conditional.html#%E7%94%A8-key-%E7%AE%A1%E7%90%86%E5%8F%AF%E5%A4%8D%E7%94%A8%E7%9A%84%E5%85%83%E7%B4%A0) 管理可复用的元素
    Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染

    [v-if](https://cn.vuejs.org/v2/guide/conditional.html#v-if-vs-v-show) vs [v-show](https://cn.vuejs.org/v2/guide/conditional.html#v-if-vs-v-show)

    • 前置条件中的模版内容、事件监听器和子组件适当地被销毁和重建。而后者只是样式切换
    • v-if 也是惰性的
    • v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

    不推荐同时使用 v-if 和 v-for。

    计算属性

    • 会缓存结果
    • 在计算属性不适用的情况下 (例如，在嵌套 v-for 循环中)

    在组件上使用v-for ul > li is

    时间

    • .stop
    • .prevent
    • .capture
    • .self
    • .once
    • .passive

    .passive 修饰符尤其能够提升移动端的性能

    <select> 元素将被渲染为“未选中”状态。在 iOS 中，这会使用户无法选择第一个选项

    .lazy

    传入一个对象的所有 property

    替换/合并已有的 Attribute

    inheritAttrs: false, // 不会影响 style 和 class的绑定

    camelCase (驼峰命名法)
    kebab-case (短横线分隔命名) 命名：

    自定义事件名称推荐kebab-case

    mixin

    • 数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先
    • 同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。
    • 值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。

    注意：Vue.extend() 也使用同样的策略进行合并。

    代码优化点：添加事件和销毁事件写在一处

    1. mounted: function () {
    2.   var picker = new Pikaday({
    3.     field: this.$refs.input,
    4.     format: 'YYYY-MM-DD'
    5.   })
    7.   this.$once('hook:beforeDestroy', function () {
    8.     picker.destroy()
    9.   })
    10. }

    组件递归

    vue todos做个动画 动画

    指令
    v-direction:[arguement]=”value”
    bind inserted update componentUpdated unbind
    el binding newNode oldNode
    binding name value expression argument

    简写 binding和update一样

    有个babel插件可以在vue中写JSX

    vue中组件通信的方式

    1. 父子组件 $emit $on
    2. 非父子组件 window.Bus = new Vue(), Bus.$emit触发， Bus.$on接收 注意要销毁 Bus.$off
    3. vuex
    4. 自己实现一个发布订阅模式
    5. 像react中props传递方法，通过回调的方式
    6. 像react中Context概念 对应vue provide / inject
    7. 面试官说插槽也算
    8. $children/$parent/$root/$attrs/$listeners/ $refs

    $attrs / $listeners
    provide inject

    1. <!doctype html>
    2. <html lang="zh">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport"
    6.                 content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>provide / inject</title>
    9. </head>
    10. <body>
    11. <script src="./vue.js"></script>
    12. <div id="app">
    13.     <cus-parent>
    14.         <cus-child></cus-child>
    15.     </cus-parent>
    16. </div>
    17. <script>
    18.   Vue.component('cus-parent', {
    19.     inheritAttrs: false,
    20.     template: `
    21. <div style="border: 1px red dashed">
    22.     <slot></slot>
    23. </div>
    24.     `,
    25.     provide () {
    26.       return {
    27.         obj: {name: 'zs'},
    28.                 fn: val => console.log('provide fn exec', val)
    29.             }
    30.         },
    31.   })
    32.   Vue.component('cus-child', {
    33.     inheritAttrs: false,
    34. //     template: `
    35. // <div>
    36. //     <h2 @click="fn(obj)">child</h2>
    37. // </div>
    38. //     `,
    39.     render(createElement) {
    40.       return createElement('div', {class: 'title', attrs:{id: 'head'}}, [createElement(
    41.         'h2', {on: {click: () => this.fn(this.obj)}}, ['child']
    42.             )])
    43.     },
    44.     inject: ['obj', 'fn'],
    45.     created () {
    46.       console.log(this.obj) // => "bar"
    47.     }
    48.   })
    49.   window.app = new Vue({
    50.     el: '#app',
    51.     data: {
    52.       message: 'message',
    53.       data: {
    54.         name: 'zs',
    55.         age: 12
    56.       },
    57.       provide: {
    58.         foo: 'bar'
    59.       },
    60.       arr: [1, 2],
    61.       show: true
    62.     }
    63.   })
    64. </script
    66. </body>
    67. </html>

    vue 组件

    组件化是Vue的精髓，Vue应用就是由一个组件构成的。Vue的组件化涉及到的内容非常多，

    定义:组件是可复用的 Vue 实例，准确讲它们是VueComponent的实例，继承自Vue。
    优点: 组件化可以增加代码的复用性、可维护性和可测试性。

    组件的本质
    vue中的组件经历如下过程
    组件配置 => VueComponent实例 => render() => Virtual DOM=> DOM所以组件的本质是产生虚拟DOM