阅读 67

Vue进阶(幺叁零):Vue3新特性

升级 Vue 3.0 项目

目前创建 Vue 3.0 项目需要通过插件升级的方式来实现,

vue-cli 暂时还未直接支持创建Vue3.0项目,首先我们进入项目目录,并输入以下指令:

cd vue-next-test
vue add vue-next
复制代码

setup

setup() 函数是 vue3 中专门为组件提供的新属性。它为我们使用 vue3 的 Composition API 新特性提供了统一的入口。

setup 函数会在 beforeCreate 之后、created 之前执

1.setup是一个新的组件选项,也是其他API的入口。也就是说,你所有的操作都将在setup函数内部定义和执行, Vue3.0也将用函数代替Vue2.x的类也就是new Vue()
2.setup 第一个参数是props,这里的props和Vue2.x中的props一致。
3.何时调用?setup是在一个组件实例被创建时,初始化了 props 之后调用,其实就是取代了Vue2.x的careted和beforeCreate。
4.setup返回一个对象,对象中的属性将直接暴露给模板渲染的上下文。而在Vue2.x中,你定义的属性都会被Vue内部无条件暴露给模板渲染上下文。
复制代码

接收prop

 props: {
    p1: String,
  },
  setup(props, context) {
    console.log(props.p1);
    
  },
复制代码

context

setup 函数的第二个形参是一个上下文对象,这个上下文对象中包含了一些有用的属性,这些属性在 vue 2.x 中需要通过 this 才能访问到,在 vue 3.x 中,它们的访问方式如下:

const MyComponent = {
  setup(props, context) {
    context.attrs
    context.slots
    context.parent
    context.root
    context.emit
    context.refs  
  }
}
复制代码

computed

计算值的行为跟计算属性 (computed property) 一样:只有当依赖变化的时候它才会被重新计算。类型某act的useCallback useMemo。

computed() 返回的是一个包装对象,它可以和普通的包装对象一样在 setup() 中被返回 ,也一样会在渲染上下文中被自动展开。

用法一:

 setup() {
    const num = ref(0);
    const get_num = computed(() => num.value + "计算属性");
    return {
      num,
      get_num,
    };
  },
复制代码

用法二:

// 创建一个 ref 响应式数据
const count = ref(1)

// 创建一个 computed 计算属性
const plusOne = computed({
  // 取值函数
  get: () => count.value + 1,
  // 赋值函数
  set: val => {
    count.value = val - 1
  }
})

// 为计算属性赋值的操作,会触发 set 函数
plusOne.value = 9
// 触发 set 函数后,count 的值会被更新
console.log(count.value) // 输出 8
复制代码

计算属性与数据监听

import { ref, computed, watch, watchEffect } from "vue";
export default {
    setup() {
        const count = ref(0);
        const doubleCount = computed(() => {
            return count.value * 5;
        });
        watch(
            () => count.value,
            (val, oldVal) => {
                console.log(`count is ${val}`);
            },
            {
                //是否深度监听
                deep: true,
                //是否先执行一次
                immediate: true
            }
        );
        function add() {
            count.value++;
        }

        return {
            count,
            add,
            doubleCount
        };
    }
};
复制代码

计算属性 computed 是一个方法,里面需要包含一个回调函数,当我们访问计算属性返回结果时,会自动获取回调函数的值。

监听器 watch 同样是一个方法,它包含 3个参数,前两个参数都是 function,第三个参数则是是否深度监听等。

第一个参数是监听的值,count.value 表示当 count.value 发生变化就会触发监听器的回调函数,即第二个参数,第二个参数可以执行监听时候的回调。

如果是2 个以上的监听属性,

 watch(
            [() => count.value, () => name.value],
            //接收两个参数,第一个是新值在数组中,第二个是旧值也是在数组中
            ([count, name], [oldCount, oldName]) => {
                console.log(count, name);
                console.log(oldCount, oldName);
                if (count != oldCount) {
                    console.log("count发声变化");
                }
                if (name != oldName) {
                    console.log("name发声变化");
                }
            }
        );
复制代码

获取路由

   //获取当前组件实例
    const vue = getCurrentInstance();
    //获取当前上下文
    const { ctx } = getCurrentInstance();
    //获取路由信息
    console.log(ctx.$router);
    function changeRouter() {
        //路由跳转
        ctx.$router.push("/about");
    }
复制代码

生命周期

2.x生命周期选项和Composition API之间的映射

  • beforeCreate ->使用 setup()
  • created ->使用 setup()
  • beforeMount -> onBeforeMount
  • mounted -> onMounted
  • beforeUpdate -> onBeforeUpdate
  • updated -> onUpdated
  • beforeDestroy -> onBeforeUnmount
  • destroyed -> onUnmounted
  • errorCaptured -> onErrorCaptured

Vuex简单使用

import Vuex from 'vuex'

export default Vuex.createStore({
  state: {
    num: 1,
  },
  mutations: {
    add(state, value) {
      console.log(value)
      state.num++
    },
    decrement(state, value) {
      console.log(value)
      state.num--
    }
  },
  actions: {
  },
  modules: {
  }
});
复制代码

挂载到Vue中

import router from './router'
import store from './store'

createApp(App).use(router).use(store).mount('#app')
复制代码

组件使用:

<template>
    <div class="home">
        <h1>VUEX使用</h1>
        <div>原始值:{{num}}</div>
        <div>
            <button @click="add">增加</button>
            <button @click="decrement">减少</button>
        </div>
    </div>
</template>

<script>
import { computed } from "vue";
import { useStore } from "vuex";

export default {
    setup() {
        const store = useStore();
        const num = computed(() => store.state.num);

        function add() {
            store.commit("add", "增加");
            store.dispatch('action', payload)
        }

        function decrement() {
            store.commit("decrement", "减少 ");
        }

        return { num, add, decrement };
    }
};
</script>
复制代码
文章分类
前端
文章标签