Vue 3 新人快速入门

vue 3 相对于 vue 2 作出了哪些改变呢？

1. Vue 3 移除了原有的生命周期函数 、data 、watch 、computed 、method、filter等。

2. Vue 3 采起了对 TypeScript 更好的支持 防止出现一些低级错误。

3. Vue 3 是彻底能够兼容vue 2的 ，在编码过程当中，能够在vue 3中使用vue2的写法。

4. 组件中同时存在两种写法时，当setup返回值中定义的方法和methods中的方法同名时，会抛出错误，

   定义的数据如和vue2中相冲突的时候 ， data会覆盖以前的字段

5. vue3采用proxy的方式实现数据代理，只会代理第一层数据 避免了vue2中对data的深层递归，提高了组件渲染性能

1. Vue 3 中的 setup 函数

1. vue3中用setup函数整合了全部的api, setup函数只执行一次，在生命周期函数前执行，因此在setup函数中拿不到当前实例this，不能用this来调用vue2写法中定义的方法。

2. 因vue3 中去除掉了 data ， 采用setup的返回值 作模板的绑定。

3. 父子组件传递数据时， vue3 将原有的 this.$emit 使用context.emit 方法替代

export default {
  // props 为 接收到的父组件传递的数据 
  // context 为 上下文
  setup(props,context){
    return {
      ...  //setup返回的数据
    }
  }
}
复制代码

2. Vue 3 中的生命周期函数

生命周期函数相对于 vue 2 变成了回调函数的形式

Vue3 能够写多个 生命周期函数。依次自上而下执行

setup() {
    onMounted(() => {
      console.log('组件挂载1');
    });
    
    onMounted(() => {
      console.log('组件挂载2');
    });

    onUnmounted(() => {
      console.log('组件卸载');
    });

    onUpdated(() => {
      console.log('组件更新');
    });

    onBeforeUpdate(() => {
      console.log('组件将要更新');
    });

    onActivated(() => {
      console.log('keepAlive 组件 激活');
    });

    onDeactivated(() => {
      console.log('keepAlive 组件 非激活');
    });

    return {};
  },

复制代码

3.ref 简单的响应式数据 ( 基础类型 )

ref能够将某个普通值包装成响应式数据，仅限于简单值，内部是将值包装成对象，再经过defineProperty来处理的 经过ref包装的值，取值和设置值的时候，需用经过value来进行设置

<template>
  <div class="mine"> <input v-model="input" /> <button @click="add">添加</button> <ul> <li v-for="(item, i) in todoList" :key="i"> {{ item }} </li> </ul> </div>
	<-- vue 3 template 支持多个子标签 --> <div></div> </template>


setup() {
    const input = ref('');
    const todoList = ref<string[]>([]);

    function add() {
      todoList.value.push(input.value);
      input.value = '';
    }

    return {
      add,
      input,
      todoList,
    };
  },

复制代码

4. reactive 数据绑定 ( 引用类型 )

使用reactive来对复杂数据进行响应式处理，它的返回值是一个proxy对象。

vue3模板: 一个template能够有多个平级的标签（vue2中只能在template写一个子标签）

<template>
  <div class="mine"> <input v-model="input" /> <button @click="add">增长</button> <ul> <li v-for="(item, i) in todoList" :key="i"> {{ item }} </li> </ul> </div>
 
	<-- vue 3 template 支持多个子标签 --> <div></div> </template>

setup() {
    const data = reactive({
      input: '',
      todoList: [],
    });

    function add() {
      data.todoList.push(data.input);
      data.input = '';
    }

    return {
      ...toRefs(data),
      add,
    };
  },



复制代码

5. Vue 3 中的 computed

计算属性，变成了函数写法，当依赖的值发生改变时会从新计算 computed包装后的值，须要用 .value去取值，template中不须要使用.value。

async setup() {
    const data = reactive({
      a: 10,
      b: 20,
    });
    
    let sum = computed(() => data.a + data.b);

    return { sum };
  },

复制代码

6. Vue 3 中的 watch

watch 变成了函数写法，其余与vue2中用法相同

const state = reactive({ count: 0 })
watch(
 () => state.count,
 (count, prevCount) => {
   //...
 }
)
复制代码

7.Vue 3 中的 vue-router

使用 vue - router 须要使用 useRoute 和 useRouter

import {useRoute, useRouter} from 'vue-router'

const route = useRoute(); // 至关于 vue2 中的this.$route
const router = useRouter(); // 至关于 vue2 中的this.$router

复制代码

8. Vue 3 中的 vuex

使用 useStore 来获取store对象 , 从vuex中取值时，要注意必须使用computed进行包装，这样vuex中状态修改后才能在页面中响应

import {useStore} from 'vuex'

setup(){
    const store = useStore(); // 至关于 vue2中的 this.$store
    store.dispatch(); // 经过store对象来dispatch 派发异步任务
    store.commit(); // commit 修改store数据
    
    let category = computed(() => store.state.home.currentCagegory
    return { category }
}
复制代码

9. Vue 3 可使用 jsx 来定义 vue 组件

export const AppMenus = defineComponent({
  setup() {
    return () => {
      return (
        <div class="app-menus"> <h1>这是一个vue组件</h1> </div>
      );
    };
  },
});

复制代码

PS:你们看了后以为对本身有帮助能够三连留言,欢迎提出宝贵意见，也欢迎各位对相关技术有兴趣的开发者（由团队开发人员微信号x118422邀请）入群，在线解答讨论数据可视化、优化图表性能等方面的技术问题~