Vue3快速上手

Vue3-admin 快速上手实战项目

1、vue3中全部采用函数式写法，替换了原来类的写法，

2、移除了原有的生命周期函数，和data、computed、watch、method等vue2中的对象，去掉了this, 并且去除了过滤器api -> filter

3、vue3源码全部采用ts编写，编码中实现了对ts更好的支持

4、vue3完全兼容vue2，在vue3中依然可以按照vue2的方式去写代码，而且两种写法可以同时存在，

5、组件中同时存在两种写法时，当setup返回值中定义的方法和methods中的方法同名时，会抛出错误。
定义的数据和data定义的数据字段相同时，会被data定义的字段覆盖

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

如下所示：

// 在vue3中定义一个响应式数据

const state = reactive({data: {obj: {}}});

state.data.obj = xxx;

返回的state是一个proxy对象，默认只会对data进行代理
那么vue3是怎么实现深层数据劫持呢，例如我们要修改obj那么是怎么监听到obj的修改呢

当我们要对深层对象obj进行修改时，会调用 state.data 的get方法，在get方法中会对state.data 进行代理，劫持state.data中的属性， get方法返回的不是state.data本身，而是被proxy代理过的对象，从而巧妙的实现了深层数据劫持，在用到该属性的时候一定会调用父级的get方法，这时候才会去劫持属性的get和set方法

一、setup函数

setup函数是vue3中所有api的入口和出口

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

vue3中去掉了data，使用setup的返回值来给模板绑定value

return 的对象如果是常量，不会变成响应式数据

this.$emit 用 context.emit 方法来替代

// props - 组件接受到的属性， context - 上下文 
setup(props, context){
    return {
        // 要绑定的数据和方法
    }
}

二、生命周期

生命周期函数，都变成了回调的形式，写在setup函数中
可以一次写多个相同的生命周期函数，按照注册顺序执行

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 {};
  },

三、ref - 简单的响应式数据

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

2、可以用ref来获取组件的引用，替代this.$refs的写法

<template>
  <div class="mine">
    <input v-model="inputVal" />
    <button @click="addTodo">添加</button>
    <ul>
      <li v-for="(item, i) in todoList" :key="i">
        {{ item }}
      </li>
    </ul>
  </div>
  <div></div>
</template>


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

    function addTodo() {
      todoList.value.push(inputVal.value);
      inputVal.value = '';
    }

    return {
      addTodo,
      inputVal,
      todoList,
    };
  },

四、reactive - 数据绑定

使用reactive来对复杂数据进行响应式处理，它的返回值是一个proxy对象，
在setup函数中返回时，可以用toRefs对proxy对象进行结构，方便在template中使用

通过reactive来创建响应式数据data，用toRefs来进行解构，在模板中直接使用 inputVal、todoList

模板中绑定的方法也需要 在setup函数中定义，并返回，才能绑定到模板中，例如addTodo方法

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

<template>
  <div class="mine">
    <input v-model="inputVal" />
    <button @click="addTodo">添加</button>
    <ul>
      <li v-for="(item, i) in todoList" :key="i">
        {{ item }}
      </li>
    </ul>
  </div>
  <div></div>
</template>

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

    function addTodo() {
      data.todoList.push(data.inputVal);
      data.inputVal = '';
    }

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

五、 computed

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

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

    return { sum };
  },

六、 watch

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

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

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

七、watchEffect 新增方法

响应式地跟踪函数中引用的响应式数据，当响应式数据改变时，会重新执行函数

const count = ref(0)
// 当count的值被修改时，会执行回调
watchEffect(() => console.log(count.value))

八、 vue-router

组件中使用路由时用useRoute和useRouter

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

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

route   用于获取当前路由数据
router  用于路由跳转

九、 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 }
}

十、用jsx来定义vue组件

vue3中支持使用jsx语法来定义vue组件

export const AppMenus = defineComponent({
  setup() {

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

十一、插槽修改

<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

一个不带 name 的 出口会带有隐含的名字“default”。

在向具名插槽提供内容的时候，我们可以在一个 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称，也可以使用v-slot的简写方式#， v-slot:header等价于 #header

<base-layout>
  <template v-slot:header>
    <h1>Here might be a page title</h1>
  </template>

  <template v-slot:default>
    <p>A paragraph for the main content.</p>
    <p>And another one.</p>
  </template>

  <template #footer>
    <p>Here's some contact info</p>
  </template>
</base-layout>

十二、Suspense 和 异步 setup

    <Suspense>
        <template #default>
          <home-swiper></home-swiper>
        </template>
        <template #fallback>
          <div>loading...</div>
        </template>
    </Suspense>

组件的setup方法使用异步，页面在加载时会先显示 fallback内容，当setup函数执行完毕才会正常加载 home-swiper组件

async setup() {
    let store = useStore();
    let sliderList = computed(() => store.state.home.sliders);
    // 计算属性，需要多加 .value
    if (sliderList.value.length === 0) {
      // 缓存 如果没有数据，请求接口获取
      await store.dispatch(`home/${Types.SET_SLIDER_LIST}`);
    }

    return { sliderList };
  },

Vue3-admin 快速上手实战项目