Vue2

渐进式

Vue一个大特点就是渐进式,意思就是你可以渐渐地用Vue,而React几乎做不到这一点

动态构建用户界面

1. 你可以继续操作DOM

2. 你可以很方便地做SEO

3. 你可以局部做单页面

4. 你可以整体做单页面

Features

1. 遵循MVVM

2. 编码简洁,体积小,运行效率高,适合PC/移动端开发

3. 本身只关注UI,可以轻松的引入Vue插件或其他第三方库

MVVM

插值表达式(仅支持单一表达式)

• {{ number + 1 }}

• {{ obj.name }}

• {{ ok ? 'YES' : 'NO' }}

• {{ message.split('').reverse().join('') }}

• <div :id="list-${id}"></div>

<span :title="toTitleDate(date)">
{{ formatDate(date) }}
</span>

Vue 属性

• el

• data

• template

• methods

• components(global / local)

  • 全局定义时命名不能重复

• filters(global / local)

  • {{ message | filter }}

  • <div v-bind="msg | filter"></div>

• watch -> single data

  • 深层

  • 回调触发时机

  • 停止

  • 即时

  • this.$watch

    //可以直接写methods方法名字符串
    watch: {
      currentBranch: 'fetchData'
    }

• ==computed -> multiple data==（不要在计算函数中做异步请求或者更改 DOM）

  • VS watch

    • computed是计算一个新属性,并将该属性挂载到vm上,而watch是监听已经存在且已挂载到vm上的属性, 计算属性不需要在 data 里面提前定义,watch 则需要,所以用watch同样可以监听computed计算属性的变化(其它还有 data、props)

    • computed本质是一个惰性求值的观察者,具有缓存性,只有当依赖变化后,第一次访问computed属性,才会计算新的值,而watch则是当数据发生变化便会调用执行函数

    • 从使用场景上说,computed适用一个数据被多个数据影响,而watch适用一个数据影响多个数据,watch适合异步或开销大的场景

  • VS method

    • methods没有缓存

    • computed不可传参,methods可以

    • computed通过getter 、setter传newValue

• ==class==

  • <p :class="{ active: isActive, 'text-danger': hasError }">xxx是字符串</p>

  • <p :class="classObject">xxx是对象</p>

  • <p :class="['bClass', 'cClass']">xxx是数组</p>

  • <div :class="[isActive ? activeClass : '', errorClass]"></div>

  • <div :class="[{ active: isActive }, errorClass]"></div>

• ==style==

  • <p :style="{ color: activeColor, fontSize: fontSize + 'px' }"></p>

  • <div :style="{ 'font-size': fontSize + 'px' }"></div>

  • <p :style="styleObject"></p>

  • <p :style="[baseStyles, overridingStyles]">test style2</p>

  • <div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

Vue 实例属性

• $el、$options、$data

• ==$attrs、$listeners== （除了class、style、v-on等）、$props

  <!-- 想要所有像 class 和 v-on 监听器这样的透传 attribute 都应用在内部的 <button> 上而不是外层的 <div> 上。通过设定 inheritAttrs: false 和使用 v-bind="$attrs" 来实现：  -->
  <div class="btn-wrapper">
    <button class="btn" v-bind="$attrs">click me</button>
  </div>

• $root、$parent、$children

• $refs(操作DOM)

  <script>
  export default {
    mounted() {
      this.$refs.input.focus()
    }
  }
  </script>
  
  <template>
    <input ref="input" />
  </template>

• 组件上的ref代表的是子组件实例

• expose

  export default {
    expose: ['publicData', 'publicMethod'],
    data() {
      return {
        publicData: 'foo',
        privateData: 'bar'
      }
    },
    methods: {
      publicMethod() {
        /* ... */
      },
      privateMethod() {
        /* ... */
      }
    }
  }

• DOM更新时机

  import { nextTick } from 'vue'
  
  export default {
    methods: {
      increment() {
        this.count++
        //适用场景
        //1. 在`created`生命周期执行DOM操作
  		  //2. 在数据变化后需要进行基于DOM结构的操作
        nextTick(() => {
          // 访问更新后的 DOM
        })
      }
    }
  }

directive

• v-once、v-cloak

  //如果没有彻底解决问题，则在根元素加上style="display: none;" :style="{display: 'block'}"
  [v-cloak] {
      display: none;
  }

• v-model

  • 原生展开 ： <input :value="val" @input="val=$event.target.value" />

  • 自定义组件展开： <CustomInput :modelValue="searchText" @update:modelValue="newValue => searchText = newValue" />

    <!-- 为了使组件正常工作 -->
    <!-- 方式一：CustomInput.vue -->
    <script>
    export default {
      props: ['modelValue'],
      emits: ['update:modelValue']
    }
    </script>
    
    <template>
      <input
        :value="modelValue"
        @input="$emit('update:modelValue', $event.target.value)"
      />
    </template>
    
    <!-- 方式二：CustomInput.vue -->
    <script>
    export default {
      props: ['modelValue'],
      emits: ['update:modelValue'],
      computed: {
        value: {
          get() {
            return this.modelValue
          },
          set(value) {
            this.$emit('update:modelValue', value)
          }
        }
      }
    }
    </script>
    
    <template>
      <input v-model="value" />
    </template>
    
    //定义别名
    <MyComponent v-model:title="bookTitle" />
    
    Vue.component('base-checkbox', {
      model: {
        prop: 'checked',
        event: 'change'
      },
      props: {
        checked: Boolean
      },
      template: `
        <input
          type="checkbox"
          v-bind:checked="checked"
          v-on:change="$emit('change', $event.target.checked)"
        >
      `
    })

• v-for、v-if、v-else、v-else-if、v-show

• v-if vs v-show

• ==v-if > v-for==

  <!-- 抛出一个错误，因为属性 todo 此时没有在该实例上定义-->
  <li v-for="todo in todos" v-if="!todo.isComplete">
    {{ todo.name }}
  </li>
  
  <!-- 方式一套一层 -->
  <template v-for="todo in todos">
    <li v-if="!todo.isComplete">
      {{ todo.name }}
    </li>
  </template>
  
  <!-- 方式二 使用计算属性 -->

• v-text、v-html

• v-slot、v-pre

• ==v-bind ==> :==

  • <div v-bind="objectOfAttrs"></div>

• ==v-on ==> @==

  • 在内联事件处理器中访问事件参数

    <!-- 使用特殊的 $event 变量 -->
    <button @click="warn('Form cannot be submitted yet.', $event)">
      Submit
    </button>
    
    <!-- 使用内联箭头函数 -->
    <button @click="(event) => warn('Form cannot be submitted yet.', event)">
      Submit
    </button>

  • 事件修饰符stop、prevent、self

    <!-- 单击事件将停止传递 -->
    <a @click.stop="doThis"></a>
    <!-- 提交事件将不再重新加载页面 -->
    <form @submit.prevent="onSubmit"></form>
    <a @click.stop.prevent="doThat"></a>
    <form @submit.prevent></form>
    <!-- 仅当 event.target 是元素本身时才会触发事件处理器 -->
    <!-- 例如：事件处理器不来自子元素 -->
    <div @click.self="doThat">...</div>

  • once、capture、passive与[原生 addEventListener 事件相对应

    <!-- 添加事件监听器时，使用 `capture` 捕获模式 -->
    <!-- 例如：指向内部元素的事件，在被内部元素处理前，先被外部处理 -->
    <div @click.capture="doThis">...</div>
    
    <!-- 点击事件最多被触发一次 -->
    <a @click.once="doThis"></a>
    
    <!-- 滚动事件的默认行为 (scrolling) 将立即发生而非等待 `onScroll` 完成 -->
    <!-- 以防其中包含 `event.preventDefault()` -->
    <div @scroll.passive="onScroll">...</div>

  • 按键修饰符enter、tab、delete、esc、space、up、down、left、right

    <input @keyup.enter="submit" />
    <input @keyup.page-down="onPageDown" />

  • 系统修饰符ctrl、alt、shift、exact、meta

    <!-- Alt + Enter -->
    <input @keyup.alt.enter="clear" />
    
    <!-- Ctrl + 点击 -->
    <div @click.ctrl="doSomething">Do something</div>
    
    <!-- 当按下 Ctrl 时，即使同时按下 Alt 或 Shift 也会触发 -->
    <button @click.ctrl="onClick">A</button>
    
    <!-- 仅当按下 Ctrl 且未按任何其他键时才会触发 -->
    <button @click.ctrl.exact="onCtrlClick">A</button>
    
    <!-- 仅当没有按下任何系统按键时触发 -->
    <button @click.exact="onClick">A</button>

  • 鼠标修饰符left、right、middle

  • 自定义事件

• ==自定义指令==（只有当所需功能只能通过直接的 DOM 操作来实现时，才应该使用自定义指令。其他情况下应该尽可能地使用 v-bind 这样的内置指令来声明式地使用模板，这样更高效，也对服务端渲染更友好）

  • hooks

    • bind 指令第一次绑定到元素时调用，只执行一次，可用于一次性初始化设置

    • inserted 元素插入父节点时调用

    • update 所有 VNode 更新时调用，可能发生在子 VNode 之前

    • componentUpdated 指令所在组件在 VNode 和其子 VNode 更新后调用

    • unbind 指令与元素解绑时调用

  • 参数

    • el 指令绑定元素，可操作 DOM

    • binding 指令描述对象

      • value：传递给指令的值。例如在 v-my-directive="1 + 1" 中，值是 2

      • oldValue：之前的值，仅在 beforeUpdate 和 updated 中可用。无论值是否更改，它都可用

      • arg：传递给指令的参数 (如果有的话)。例如在 v-my-directive:foo 中，参数是 "foo"

      • modifiers：一个包含修饰符的对象 (如果有的话)。例如在 v-my-directive.foo.bar 中，修饰符对象是 { foo: true, bar: true }

      • instance：使用该指令的组件实例

      • dir：指令的定义对象

    • vnode 代表绑定元素的底层 VNode

    • prevNode：之前的渲染中代表指令所绑定元素的 VNode。仅在 beforeUpdate 和 updated 钩子中可用

• ==表单输入绑定==

  • 

    t
  • 基础用法

    <input type='checkbox' v-model="name" true-value="xxx" false-value="yyy">

  • 值绑定

  • 表单事件修饰符v-model:lazy、v-model:number、v-model:trim

  • 自定义model

    model: {
        prop: "phoneInfo", // 默认 value
        event: "change" // 默认 input
    },
    props: {
        phoneInfo: Object,
        zipCode: String
    }
    
    <PersonalInfo v-model="phoneInfo" :zip-code.sync="zipCode" />
    
    <PersonalInfo
        :phone-info="phoneInfo"
        :zip-code="zipCode"
        @change="val => (phoneInfo = val)"
        @update:zipCode="val => (zipCode = val)"
    />

==组件(global / local)==

• 属性

  • ==传递props==

    • 单向数据流

    • props初始化先于data,可挂载到子实例data上

    • 校验(null和undefined会通过任何类型验证)

      props: {
      	//null和undefined会通过任何类型验证
      	propA: Number,
      	propB: [String, Number],
      	propC: {
      		type: String,
      		required: true
      	},
      	propD: {
      		type: Number,
      		default: 100
      	},
      	propE: {
      		type: Object,
      		// 对象或数组默认值必须从一个工厂函数获取
      		default: function () {
      			return { message: 'hello' }
      		}
      	},
      	propF: {
      		validator: function (value) {
      			return ['success', 'warning', 'danger'].indexOf(value) !== -1
      		}
      	},
          propG: {
      		type: Array,
               default: () => [] 
      	}
      }
      
      
      //对于多类型场景
      <template>
        <button :style="computedWidth">{{ computedWidth }}</button>
      </template>
      
      <script>
        export default {
          props: {
            width: [String, Number]
          },
          computed: {
            computedWidth () {
              let o = {}
              if (typeof this.width === 'string') o.width = this.width
              if (typeof this.width === 'number') o.width = this.width + 'px'
              return o
            }
          }
        }
      </script>

  • 原生属性自动挂载到组件根元素上，可设置inheritAttrs = false不继承

  • Non-props

    //parent
    <Child style="color:red" :msg="msg">
      
    //Child
    //当子组件有父节点的时候，non-props才会挂载到子组件根节点，否则不挂
    //通过如下方式挂载到平级的某个节点上
    //挂载所有
    <div v-bind="$attrs">Hello world</div>
    <div >Hello world2</div>
    
    //只挂载style
    <div v-bind:style="$attrs.style">Hello world</div>
    <div >Hello world2</div>
    
    //业务逻辑上只使用msg
    mounted() {
      console.log(this.$attrs.msg)
    }

  • .sync

    //子组件
    this.$emit('update:title', newTitle)
    
    //父组件
    <text-document
      v-bind:title="doc.title"
      v-on:update:title="doc.title = $event"
    ></text-document>
    
    //to
    <text-document v-bind:title.sync="doc.title"></text-document>`

  • 特殊属性 class / style / ref / key

• 事件

  • 修饰符事件，应用于原生html元素

  • 普通事件

    <!-- 父组件 -->
    <BlogPost
      ...
      @enlarge-text="postFontSize += 0.1"
     />
    
    <!-- 子组件 -->
    <template>
      <div class="blog-post">
        <h4>{{ title }}</h4>
        <button @click="$emit('enlarge-text')">Enlarge text</button>
      </div>
    </template>

  • emits

    <!-- BlogPost.vue -->
    <script>
    export default {
      props: ['title'],
      emits: ['enlarge-text']
    }
    </script>
    
    
    //emits校验
    export default {
      emits: {
        // 没有校验
        click: null,
         //校验父组件的add方法 <Child @add="xxx">
    		add: (value) => value < 20 ? true : false
        // 校验 submit 事件
        submit: ({ email, password }) => {
          if (email && password) {
            return true
          } else {
            console.warn('Invalid submit event payload!')
            return false
          }
        }
      },
      methods: {
        submitForm(email, password) {
          this.$emit('submit', { email, password })
        }
      }
    }

插槽

• 默认内容

• 具名插槽

  <BaseLayout>
    <template #header>
      <h1>Here might be a page title</h1>
    </template>
  
    <!-- 隐式的默认插槽 -->
    <p>A paragraph for the main content.</p>
    <p>And another one.</p>
  
    <template #footer>
      <p>Here's some contact info</p>
    </template>
  </BaseLayout>

• 作用域插槽(父组件需要访问子组件的data的时候)

  • 默认插槽

    <!-- <MyComponent> 的模板 -->
    <div>
      <slot :text="greetingMessage" :count="1"></slot>
    </div>
    
    <MyComponent v-slot="{ text, count }">
      {{ text }} {{ count }}
    </MyComponent>

  • 具名插槽

    <!-- <MyComponent> 的模板 -->
    <slot name="header" message="hello"></slot>
    
    <MyComponent>
      <template #header="headerProps">
        {{ headerProps }}
      </template>
    
      <template #default="defaultProps">
        {{ defaultProps }}
      </template>
    
      <template #footer="footerProps">
        {{ footerProps }}
      </template>
    </MyComponent>

• 动态组件

  <keep-alive>
    <component :is="showComponent" />
  </keep-alive>

• 异步组件

  app.component('async-component', Vue.defineAsyncComponent(
  	() => {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve({
            template: `<div>这是一个异步组件</div>`
          })
        })
      })
    }
  ))

• DOM 模板解析注意事项

  • 大小写

  • 闭合标签

  • 元素位置显示

• 穿透scoped

  • 在模板中使用两次style标签

    <style lang="scss">
    		/*添加要覆盖的样式*/
    </style>
    <style lang="scss" scoped>
    		/* local styles */
    </style>

  • 使用>>>或/deep/操作符(Sass之类的预处理器无法正确解析>>>)

    <style lang="scss">
    .box >>> input {
      width: 166px;
      text-align: center;
    }
    
    .box {
      /deep/ input {
        width: 166px;
        text-align: center;
      }
    }
    </style>

生命周期

• beforeCreate/created、beforeMount/mounted、beforeUpdate/updated、beforeDestroyed/destroyed、errorCaptured

  
• activated/deactivated、errorCaptured

Vue优化

• 编码阶段

  • 尽量减少data中的数据，data中的数据都会增加getter和setter，会收集对应的watcher

  • v-if和v-for不能连用

  • 如果需要使用v-for给每项元素绑定事件时使用事件代理

  • SPA 页面采用keep-alive缓存组件

  • 在更多的情况下，使用v-if替代v-show

  • key保证唯一

  • 使用路由懒加载、异步组件

  • 防抖、节流

  • 第三方模块按需导入

  • 长列表滚动到可视区域动态加载

  • 图片懒加载

• SEO优化

  • 预渲染

  • 服务端渲染SSR

• 打包优化

  • 压缩代码

  • Tree Shaking/Scope Hoisting

  • 使用cdn加载第三方模块

  • 多线程打包happypack

  • splitChunks抽离公共文件

  • sourceMap优化

• 用户体验

  • 骨架屏

  • PWA

  • 还可以使用缓存(客户端缓存、服务端缓存)优化、服务端开启gzip压缩等