Vue 3 新人快速入门-一一网

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

Vue 3 移除了原有的生命周期函数、data 、watch 、computed 、method、filter等。
Vue 3 采取了对 TypeScript 更好的支持防止出现一些低级错误。
Vue 3 是完全可以兼容vue 2的，在编码过程中，可以在vue 3中使用vue2的写法。
组件中同时存在两种写法时，当setup返回值中定义的方法和methods中的方法同名时，会抛出错误，

定义的数据如和vue2中相冲突的时候， data会覆盖之前的字段
vue3采用proxy的方式实现数据代理，只会代理第一层数据避免了vue2中对data的深层递归，提升了组件渲染性能

1. Vue 3 中的 setup 函数

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

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

父子组件传递数据时， 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>
      );
    };
  },
});

复制代码