vue2平滑过渡到vue3的必看文章之详解核心知识

引言：vue2中需要掌握的知识

• 基础知识
  • 创建实例
    
  • 模板语法/JSX语法
    
  • 指令
    
  • data及数据劫持
    
  • methods / computed / watch / filters
    
  • 事件监听和修饰符
    
  • 条件渲染
    
  • 循环渲染
    
  • 表单处理和修饰符
    
  • class/style样式处理
    
  • …
    
• 组件开发
  • 局部组件
    
  • 全局组件
    
  • 组件命名
    
  • 属性处理
    
  • 自定义事件和EventBus
    
  • 插槽和作用域插槽
    
  • 动态组件和异步组件
    
  • …
    
• 高级应用
  • 混入 Mixins
    
  • 插件开发 Vue.use()
    
  • 自定义指令 Vue.directive
    
  • 过渡动画 transition
    
  • keep-alive
    
  • 单元测试
    
  • …
    
• 生态圈
  • vue/cli
    
  • vuex
    
  • vue-router
    
  • axios
    
  • devTools
    
  • element-ui/vant/cubeui
    
  • …
    
• 成神之路
  • 手写 vue / vuex / vue-router …
    
  • 组件库封装
    
  • 权限管控
    
  • 服务器SSR渲染
    
  • 大型实战开发
    
  • …

Vue2之部分学习方法

1. 看官方文档或者vue视频
   - Vue.js 2 官方文档
   - vue的文档应该是比较详细的api了。建议把官网头部：学习->文档（例如：教程，api，风格文档） ，生态系统 -> 工具（例如：Devtools，Vue CLI，Vue loader） / 核心插件（例如：Vue Router，Vuex，Vue 服务端渲染）的文章都看几遍，总会有意外的收获。
2. CSDN或者掘金或者其他网站的相关文章（vue相关生态的基础文章，进阶文章）
   -Vue相关基础文章
3. GitHub上pull下Vue相关项目（如果不会找可以去CSDN或者掘金或者其他网站搜索。或者加一些前端群，会有大佬自己写的或者推荐->适合你的），多敲敲结合api理解。
4. 加相关前端群，浏览前端相关网站，一直要强制自己接触最底层和最新知识，然后慢慢提升自己。

vue3核心知识与实战开发

1. vue3新特性全面剖析

【扫盲】一款框架诞生需要的阶段

• 开发
  
• alpha版：内部测试版 α
  
• beta版：公开测试版 β
  
• rc版：Release Candidate（候选版本）
  
• stable版：稳定版
  
  
  
  vue目前稳定的版本：2.6.x，后续出 2.7.x 版本（加入部分vue3内容），维护18个月之后，除安全漏洞更新之外，其余的不再继续更新~~
  vue3.0在使用中兼容vue2.0的信息

---

Vue.js 3.0 Beta 相关知识

• 详细讲解 Vue.js 3.0 Beta 相关知识，可以直接看这篇文章，Vue.js 3.0 Beta笔记：尤雨溪直播内容整理

Performance [pəˈfɔːməns]

• 重写了虚拟Dom的实现（跳过静态节点，只处理动态节点）
  
• update性能提高1.3~2倍
  
• SSR速度提高了2~3倍
  

Tree shaking [ˈʃeɪkɪŋ]

• 可以将无用模块“剪辑”，仅打包需要的
  

Fragment ['frægmənt]

• 不再限于模板中的单个根节点
  

[ˈtelɪpɔːt]

• 以前称为 [ˈpɔːtl]，译作传送门
  

[səˈspens]

• 可在嵌套层级中等待嵌套的异步依赖项
  

TypeScript

• 更好的TypeScript支持
  

Custom Renderer API

• 自定义渲染器API
  
• 用户可以尝试WebGL自定义渲染器
  

开发常使用->重点

Composition [ˌkɒmpəˈzɪʃn] API

• 组合式API，替换原有的 Options [ˈɒpʃnz] API

  • 根据逻辑相关性组织代码，提高可读性和可维护性
    
  • 更好的重用逻辑代码（避免mixins混入时命名冲突的问题）
    

• 但是依然可以延用 Options [ˈɒpʃnz] API
  
  
  
  -

• Proxy [ˈprɒksi]
  https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy

• 响应式原理不再基于 Object.defineProperty
  

---

2. 基于 vue/cli 配置 vue3.0

https://github.com/vuejs/vue-next
vue-cli-plugin-vue-next

$ npm install -g @vue/cli
$ vue --version
$ vue create xxx
$ vue add vue-next

"dependencies": {
"vue": "^3.0.0-beta.1"
},
"devDependencies": {
"@vue/compiler-sfc": "^3.0.0-beta.1",
"eslint-plugin-vue": "^7.0.0-alpha.0",
"vue-cli-plugin-vue-next": "~0.1.3"
},
eslintConfig": {
    "extends": [
      "plugin:vue/vue3-essential"
    ]
}

---

3. 基于vite配置vue3.0

由 vue 作者尤雨溪开发的 web 开发工具
https://github.com/vitejs/vite

• 基于浏览器原生 ES imports 的开发服务器（利用浏览器去解析 imports，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随起随用）
  
• 同时不仅有 Vue 文件支持，还搞定了热更新，而且热更新的速度不会随着模块增多而变慢
  

$ npm init vite-app xxx
$ cd xxx
$ npm install
$ npm run dev
$ npm run build
或者
$ yarn create vite-app xxx
$ yarn
$ yarn dev
$ yarn build

4.composition-api的实战使用

• composition-api中文API
• 建议把中文官网头部：征求意见稿（RFC）、API参考（API Reference） 多看几遍
  

1. 掌握setup和响应系统API

https://vue-composition-api-rfc.netlify.app/zh/api.html

setup

setup 函数是一个新的组件选项，作为在组件内使用 Composition API 的入口点

• 初始化props和beforeCreate之间调用
  
• 可以接收 props 和 context
  
• this在setup()中不可用
  

props是响应式的，可以基于watchEffect/watch监听，解构赋值后则无效

export default {
props: {
title: String,
},
setup(props) {
watchEffect(() => {
console.log(`title is: ` + props.title);
});
}
};

返回的结果可以直接在模板中渲染使用

export default {
props: { title: String },
setup() {
let supNum = 0,
oppNum = 0;
let change = lx => {
lx === 0 ? supNum++ : oppNum++;
};
return {
supNum,
oppNum,
change
};
}
};

ref

接受一个参数值并返回一个响应式且可改变的 ref 对象

• ref 对象拥有一个指向内部值的单一属性 .value
  
• 当ref在模板中使用的时候，它会自动解套，无需在模板内额外书写 .value
  

import { ref } from "vue";
export default {
setup() {
let supNum = ref(0),
oppNum = ref(0);
let change = lx => {
lx === 0 ? supNum.value++ : oppNum.value++;
};
return {
supNum,
oppNum,
change
};
}
};

reactive

接收一个普通对象然后返回该普通对象的响应式代理
等同于 2.x 的 Vue.observable()

• 响应式转换是“深层的”：会影响对象内部所有嵌套的属性
  

import { ref, reactive } from "vue";
export default {
props: { title: String },
setup() {
let state = reactive({
supNum: 0,
oppNum: 0,
arr: [10, 20]
});
let change = lx => {
lx === 0 ? state.supNum++ : state.oppNum++;
// 比Object.defineProperty好用在于：对于数据或者并未初始化的对象成员，都可以随意修改值，而且具备响应式的效果
state.arr[0] = state.arr[0] + 1;
state.name = "ls";
};
return {
//...toRefs(state),
state,
change
};
}
};

readonly

传入一个对象（响应式或普通）或 ref，返回一个原始对象的只读代理
一个只读的代理是“深层的”，对象内部任何嵌套的属性也都是只读的

const original = reactive({ count: 0 })
const copy = readonly(original)
watchEffect(() => {
// 依赖追踪
console.log(copy.count)
});
// original 上的修改会触发 copy 上的侦听
original.count++;
// 无法修改 copy 并会被警告
copy.count++; // warning!

computed

传入一个 getter 函数，返回一个默认不可手动修改的 ref 对象

const count = ref(1);
const plusOne = computed(() => count.value + 1);
console.log(plusOne.value); //2
plusOne.value++; //错误！

或者传入一个拥有 get 和 set 函数的对象，创建一个可手动修改的计算状态

const count = ref(1);
const plusOne = computed({
get: () => count.value + 1,
set: val => {
count.value = val - 1;
}
});
plusOne.value = 1;
console.log(count.value); //0

import { ref, reactive, toRefs, computed } from "vue";
export default {
props: { title: String },
setup() {
......
// 计算属性
let ratio = computed({
get: () => {
let total = state.supNum + state.oppNum;
return total === 0
? "--"
: ((state.supNum / total) * 100).toFixed(2) + "%";
}
});
return {
......,
ratio
};
}
};

watchEffect

立即执行传入的一个函数，并响应式追踪其依赖，并在其依赖变更时重新运行该函数

export default {
props: {
title: String,
},
setup(props) {
watchEffect(() => {
console.log(`title is: ` + props.title);
});
}
};

watch

watch API 完全等效于 2.x this.$watch

• watch 需要侦听特定的数据源，并在回调函数中执行副作用
  
• 默认情况是懒执行的，也就是说仅在侦听的源变更时才执行回调
  

侦听单个数据源

// 侦听器的数据源可以是一个拥有返回值的 getter 函数，也可以是 ref

// 侦听一个 getter
const state = reactive({ count: 0 })
watch(
() => state.count,
(count, prevCount) => {
/* ... */
}
);

// 直接侦听一个 ref
const count = ref(0)
watch(count, (count, prevCount) => {
/* ... */
});

import { ref, reactive, toRefs, computed, watch } from "vue";
export default {
setup() {
....
let ratio = ref("--");
watch(state, (state, preState) => {
let total = state.supNum + state.oppNum;
ratio.value =
total === 0 ? "--" : ((state.supNum / total) * 100).toFixed(2) + "%";
});
return {
...,
ratio
};
}
};

2. 掌握新生命周期函数和模板refs的使用

模板 Refs

当使用组合式 API 时，reactive refs 和 template refs 的概念已经是统一的

配合 render 函数 / JSX 的用法

export default {
  setup() {
    const root = ref(null)
    return () =>
      h('div', {
        ref: root,
      })
    // 使用 JSX
    return () => 

  },
}

生命周期函数

可以直接导入 onXXX 一族的函数来注册生命周期钩子

• 这些生命周期钩子注册函数只能在 setup() 期间同步使用
  
• 在卸载组件时，生命周期钩子内部同步创建的侦听器和计算状态也将删除
  

5.响应式系统工具集

• 响应式系统工具集 (unref / toRef / toRefs / isRef / isProxy / isReactive / isReadonly)
• 详细介绍在这：响应式系统工具集:

6.高级响应式系统 API

• 高级响应式系统 API (customRef/ markRaw/ shallowReactive/ shallowReadonly/ shallowRef/ toRaw)
• 详细介绍在这：高级响应式系统 API

7. Vue3之部分学习方法

1. 看官方文档或者vue3相关视频
   - 详细讲解 Vue.js 3.0 Beta 相关知识，可以直接看这篇文章，Vue.js 3.0 Beta笔记：尤雨溪直播内容整理
   - Vue.js 作者尤雨溪：聊聊 Vue.js 3.0 Beta：B站录播地址
   - composition-api中文API：建议把中文官网头部：征求意见稿（RFC）、API参考（API Reference） 多看几遍
2. CSDN或者掘金或者其他网站的相关文章（vue3相关文章）
   -vue3.0尝鲜，写一个win10日历,看完git下代码自己结合composition-api看下
3. GitHub上pull下Vue3相关项目（如果不会找可以去CSDN或者掘金或者其他网站搜索。或者加一些前端群，会有大佬自己写的或者推荐->适合你的），多敲敲结合api理解。
4. 加相关前端群，交流Vue3相关知识。

后记

• 借鉴周哥文章,感谢周哥。
• 大家觉得能看，可以点个赞，添加个收藏，点个关注，谢谢支持。