vue3复习-介绍

jason_yang
125 阅读3分钟

1.为何学习vue

Web1.0

  • 后端MVC
  • 前后端强耦合
  • JSP, Smarty模板

Web2.0

  • AJAX
    • Gmail
  • jQuery
    • 主要解决跨浏览器兼容性问题
    • 复杂的业务难以维护
    • 频繁的操作DOM效率低，并且维护麻烦

MVVM

  • View-Model层
  • Angular
    • Angular1
      • 脏检查
        • 每次用户交互都检查所有数据的变化，有则通知DOM更新
      • 最早的数据驱动
    • Angular2
      • TypeScript
      • RxJS
  • Vue
    • Vue1
      • 一个属性一个watch
      • 占用内存过多
    • Vue2
      • 引入虚拟DOM
      • 一个watch一个组件
      • 同时diff是单位是以组件级别，而不是整个页面的树
      • 加入了template，约束用户的编写，提高了简单业务的效率
    • Vue3
      • 基于template做了很多编译时的优化
      • 使用Proxy提升了响应式的效率
    • 主要是在编译时
      • 很多自定义的指令，组件
  • React
    • 虚拟DOM
      • 每次比较整棵虚拟DOM的树，找到差异才执行DOM更新
      • JSON schema
      • diff比较时间过长
    • JSX
      • 灵活的UI与JS的混编
    • Fiber
      • 把任务切片执行
    • 主要是在运行时
      • 所以很少自己的API
  • Svelte
    • 直接生成DOM
    • 没有运行时，效率高

2.Vue3 新特征

Vue2 缺点

  • 类型支持：Flow.js已经不再维护
  • 代码耦合度太高，想单独使用Weex都需要copy完整一份源码改
  • 响应性效率低，每个watch都要使用前，提前初始化

Vue3 - 7个新特点

  1. RFC 社区讨论机制
    • 讨论制定新的特性，放在的issue里面vuejs/rfcs
  2. 响应式系统
    • 使用Proxy新特性实现
    • 性能更高，体积小
  3. 自定义渲染器
    • 响应式与Vue解构
    • 可以预其他react node 或者canvas实现集成
  4. 所有模块的TypeScript实现
    • 提示更加友好
    • 代码更加稳定
  5. CompositionAPI
    • 组合API
    • 可以复用业务逻辑，并且解决OptionAPI跳屏问题
    • 搭配setup写法
  6. 新的组件
    • Fragment
    • Teleport
    • Suspense
  7. Vite构建调试工具
    • 只根据首页所依赖的内容打包，不会全量打包
    • 提升开发阶段的调试效率

3.Vue2 升级到 Vue3

前提

  • 兼容性不好，不支持IE11
  • 使用Vue2.7让大家提前熟悉CompositionAPI特性
    • @vue/composition-api 插件

迁移文档

多个 createApp -> 多个use

  • 解决全局覆盖组件问题

Vue-cli4

  • 支持Vue2 Vue3

自动化工具升级Vue3

  • 在Vue3项目中有 @vue/compact
    • "@vue/compat": "^3.2.19"
    • "@vue/compiler-sfc": "^3.2.19"
// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.resolve.alias.set('vue', '@vue/compat')
    ......
  }
}
  • 阿里妈妈”出品的 gogocode
npm install gogocode-cli -g  // 安装工具  
gogocode -s ./src -t gogocode-plugin-vue -o ./src-out  // 升级代码  
gogocode -s package.json -t gogocode-plugin-vue -o package_out.json  // 升级配置文件  
npm install  // 安装升级

栗子 todolist

<script setup>
  import { computed, ref } from 'vue' 
  let title = ref('')
  let todoList = ref([
    {
      title: 'xxxxxx',
      done: false,
    },
  ])
  const addTodo = () => {
    if (!title.value.trim()) { 
    
    } else {
      todoList.value.push({
        title: title.value.trim(),
        done: false,
      })
      title.value = ''
    }
  }
  const deleteTodo = (index) => {
    todoList.value.splice(index, 1)
  }
  const clear = () => {
    todoList.value = todoList.value.filter((todoItem) => !todoItem.done)
  }
  let undoneCount = computed(() => { // 还未完成的
    return todoList.value.filter((todoItem) => !todoItem.done).length
  })
  let all = computed(() => todoList.value.length)
  let allDone = computed({
    get: function () {
      return undoneCount.value === 0
    },
    set: function (value) {
      todoList.value.forEach((todoItem) => (todoItem.done = value))
    },
  }) 
</script>

<template>
  <input v-model="title" type="text" @keydown.enter="addTodo" />
  <button v-if="undoneCount < all" @click="clear">清空完成选项</button>
  <template v-if="todoList.length"> 
      <li v-for="(todoItem, index) in todoList" :key="todoItem.title">
        <input v-model="todoItem.done" type="checkbox" />
        <span :class="{ done: todoList.done }">{{ todoItem.title }}</span>
        <span @click="deleteTodo(index)"> x </span>
      </li> 
    <div>全部完成<input v-model="allDone" type="checkbox" /></div>
    <div>完成情况{{ all - undoneCount }} / {{ all }}</div>
  </template>
  <div v-else>暂无数据</div> 
</template>

参考

玩转 Vue 3 (geekbang.org)

avatar
文章
阅读
粉丝