vue3.0团队内部分享总结

记录了我在组内的技术分享, 有同样需求的同学可以参考一下

分享全程下来时间大约1小时

一. 版本

当前还处于 beta版本, 想要正式使用在项目里还需要一段的时间, 但是结构与api变化应该不大了.

这里列出的并不全, 但是够用了
1. alpha 内测版本
2. beta  公测版本
3. Gamma 正式发布的候选版本
4. Final 正式版
5. plus  增强版
6. full  完全版 
7. Trial 试用版（一般有时间或者功能限制）

二. 介绍

  1. 学一门新鲜的技术,就像练习王者荣耀新出的英雄一样, 探索他的好玩之处可以给开发者带来快乐, 使用新的好的技术会让工作更愉悦

  2. 这个版本的vue 类似"我的世界", 全部都是一个个方块组成, 不要小看方块, 方块多了甚至可以组成圆形(量变引起质变), 新鲜的玩法才能激发我们的兴趣

三. vue3.0的环境搭建

准备一套搭建好的环境防治到时候出现意外, 现场再按照步骤搭建一版, 每一步都不要落下能让大家更好的理解.

  1. npm install -g @vue/cli  cli升级到4版本

  2. 随便创建个项目, vue create next-test

  3. 选择配置最好把router与vuex一起选上, 方便后续升级

  4. vue add vue-next   cli提供的进化到下一版本的命令, 执行后自动将router, vuex 升级到alpha版.

四. vue3.0重要的优化

  1. 模板编译速度的提升, 对静态数据的跳过处理.
  2. 对数组的监控
  3. 对ts有了很好的支持
  4. 对2.x版本的完全兼容
  5. 可以有多个根节点 (也有bug, 比如外层开了display:flex 那么里面会收到影响, 也就是说布局更灵活但也更要小心, 总之请对自己与他人的代码负责)
  6. 支持Source map, 虽然没演示但是这点真的重要

五. vuex, router, vue 初始化写法的变化

vue:

import { createApp } from 'vue';
import App from './App.vue'
import router from './router'
import store from './store'

// 方法一. 创建实例变成了链式, 直接写下去感觉语义与结构有点模糊, 但是我们要理解vue这样做的良苦用心, 前端趋近于函数化.
// createApp(App).use(router).use(store).mount('#app')

// 方法二.
const app = createApp(App);
app.use(router);
app.use(store);
app.mount('#app');

vuex:

import { createStore } from 'vuex'
// 专门创建实例的一个方法
export default createStore({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
});

router

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  }
]

const router = createRouter({
// 专门创建history的函数
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

六. 变量的定义

1: ref

import { ref } from "vue";
export default {
  // 1: 这个版本基本逻辑都在setup里面完成了, 有人说把他当成2.x的data.
  setup() {
    // 2: 定义一个追踪的变量,也就是双向绑定.
    const n = ref(1); // 生成的n是一个对象, 这样方便vue去监控它
    function addN() {
      n.value++; // 注意这里要使用.value的形式, 因为n是对象↑, value才是他的值
    }
    return {
      n,   // 返回出去页面的template才可以使用它, {{n}} 不需要.value
      addN
    }
  }
 }

2: reactive

import { reactive, toRefs } from "vue";
export default {
  setup() {
    // 注意事项: reactive的对象不可以结构返回或导入, 会导致失去响应式
    const obj = reactive({
      name: "金毛",
      age: 4
    });
    function addObj() {
      obj.age++;
    }
    return {
      ...obj, // 这样写不好, 里面会失去响应式
      obj, // 这样写那么外面就要都基于obj来调取, 类型{{obj.age}}
      ...toRefs(obj) // 必须是reactive生成的对象, 普通对象不可以, 他把每一项都拿出来包了一下, 我们可以这样用了 {{age}}, 放心咱们多深的obj也可以响应
    }
  }
 }

7. 之前的ref何去何从

这个老兄被别人抢了关键词, 也只能自己改改写法了

  

    <div ref="content">第一步, 在dom上面定义, 他会有一个回调div>
  </div>
  

    
v-for 出来的refli>
    <li>可以写为表达式的形式, 可以推导出vue是如何实现的li>
    <li>vue2.x的时候v-for不用这么麻烦, 直接写上去会被组装成数组li>
    <li :ref="el => { items[index] = el }" v-for="(item,index) in 6" :key="item">{{item}}li>
  </ul>

import { ref, onMounted, onBeforeUpdate } from "vue";

export default {
  setup() {
    // 2: 定义一个变量接收dom, 名字无所谓, 但是与dom统一的话会有很好的语义化
    const content = ref(null);
    const items = ref([]);

    // 4: 在生命周期下, 这个值已经完成了变化, 所以当然第一时间就拿到
    onMounted(() => {
      console.log(content.value);
      console.log("li标签组", items.value);
    });

    // 5: 确保在每次变更之前重置引用
    onBeforeUpdate(() => {
      items.value = [];
    });

    // 3: 返出去的名称要与dom的ref相同, 这样就可以接收到dom的回调
    return {
      content,
      items
    };
  }
};

8. 生命周期