初始vue3

1、 创建 vue3.0 工程

1、使用 vue-cli 创建

  • vue create vue_test

2、使用 vite 创建

  • main.js

    // 引入的不再是Vue构造函数了，引入的是一个名为createApp的工厂函数
    import { createApp } from "vue";
    import App from "./App.vue";

    // 创建应用实例对象--App（类似于之前Vue2中的vm,但app比vm更“轻”） 挂载
    createApp(App).mount("#app");

2、常用 Composition API （组合式 api）

1、setup

  • 理解：Vue3.0 中的一个新的配置项，值为一个函数

  • setup 是所有 Composition API(组合 API) “表演的舞台”

  • 组件中所用到的：数据、方法等等，均要配置在 setup 中。

  • setup 函数的两种返回值

  • 1、若返回一个对象，则对象中的属性、方法、在模板中均可以直接使用

  • 2、若返回一个渲染函数：则可以自定义渲染内容

  • 注意点
  • 1、尽量不要与 Vue2.x 配置混用
  • Vue2.x 配置（data、methods、computed...）中可以访问到 setup 中的属性、方法
  • 但在 setup 中不能访问到 Vue2.x 配置（data、methods、computed...）
  • 如果有重名，setup 优先
  • 2、setup 不能是一个 async 函数，因为返回值不再是 return 的对象，而是 promise,模板看不到 return 对象中的属性

2、ref 函数

  • RefImpl：引用对象/ref 对象 （引用实现的实例对象）

  • reference： 引用

  • implement： 实现

  • 作用：定义一个响应式的数据

  • 语法：const xxx = ref(initValue)

  • 创建一个包含响应式数据的引用对象(reference 对象，简称 ref 对象)

  • JS 中操作数据：xxx.value

  • 模板中读取数据：不需要.value 直接

    {{xxx}}

  • 备注

  • 接收的数据可以是：基本类型，也可以是对象类型

  • 基本类型的数据：响应式依然是靠 Object.defineProperty()的 get 与 set 完成的。

  • 对象类型的数据：内部“求助”了 vue3.0 的一个新函数----reactive 函数

3、reactive 函数

  • reactive 反应 响应
  • 作用： 定义一个对象类型的响应式数据（基本类型不要用它，用 ref 函数）
  • 语法：const 代理对象=reactive(源对象) 接收一个对象（或数组），返回一个代理对象(proxy 对象)
  • reactive 定义的响应式数据是“深层次的”

  • 内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据进行操作

4、Vue3.0 中的响应式原理

vue2.x 的响应式

  • 实现原理

  • 对象类型：通过 Object.defineProperty()对属性的读取，修改进行拦截(数据劫持)

  • 数组类型：通过重写更新数组的一系列方法来实现拦截，（对数组的变更方法进行了包裹）

    Object.defineProperty(data,'count',{
    get() {},
    set() {}
    })

  • 存在问题：

  • 新增属性、删除属性、界面不会更新

  • 直接通过下标修改数组、界面不会自动更新

Vue3.0 的响应式
  • 实现原理
  • 通过 Proxy(代理)：拦截对象中任意属性的变化，包括：属性值的读写，属性的添加，属性的删除等。
  • 通过 Reflect(反射)：对被代理对象的属性进行操作

  • 被代理对象(源对象)

    new Proxy(data, {
    // 拦截读取属性值
    get(target, prop) {
    return Reflect.get(target,prop)
    },
    // 拦截设置属性值或添加新属性
    set(target, prop, value) {
    return Reflect.set(target,prop,value)
    },
    // 拦截设置属性值添加新属性
    deleteProperty(target, prop) {
    return Reflect.deleteProperty(target,prop)
    },
    });

  • 模拟 Vue3.0 实习响应式

    // 模拟Vue3.0实习响应式
    let person = {
    name: "张三",
    age: 18,
    };
    const p = new Proxy(person, {
    // 有人读取p的某个属性时调用
    get(target, propName) {
    console.log(有人读取了p身上的${propName}属性);
    return target[propName];
    },
    // 有人修改p的某个属性、或给p追加某个属性时调用
    set(target, propName, value) {
    console.log(有人修改了p身上的${propName}属性，我要去更新界面了！);
    target[propName] = value;
    },
    // 有人删除p的某个属性时调用
    deleteProperty(target, propName) {
    console.log(有人删除了p身上的${propName}属性，我要去更新界面了！);
    return delete target[propName];
    },
    });

  • vue3.0

    let person = {
    name: "张三",
    age: 18,
    };
    const p = new Proxy(person, {
    // 有人读取p的某个属性时调用
    get(target, propName) {
    console.log(有人读取了p身上的${propName}属性);
    return Reflect.get(target,propName)
    },
    // 有人修改p的某个属性、或给p追加某个属性时调用
    set(target, propName, value) {
    console.log(有人修改了p身上的${propName}属性，我要去更新界面了！);
    Reflect.set(target,propName,value)
    },
    // 有人删除p的某个属性时调用
    deleteProperty(target, propName) {
    console.log(有人删除了p身上的${propName}属性，我要去更新界面了！);
    return Reflect.deleteProperty(target,propName)
    },
    });

5、reactive 对比 ref

  • 从定义数据角度对比：

  • ref 用来定义：基本类型数据

  • reactive 用来定义：对象（或数组）类型数据

  • 备注：ref 也可以定义对象(或数组)类型数据，它内部会自动通过 reactive 转为代理对象。

  • 从原理角度对比：

  • ref 通过 Object.defineProperty()的 get 与 set 来实现响应式（数据劫持）

  • reactive 通过使用 Proxy 来实现响应式(数据劫持)，并通过 Reflect 操作源对象内部的数据

  • 从使用角度对比：

  • ref 定义的数据：操作数据需要.value，读取数据时模板中直接读取不需要.value

  • reactive 定义的数据：操作数据与读取数据：均不需要.value

6、setup 的两个主要点

  • setup 执行的时机

  • 在 beforeCreate 之前执行一次，this 是 undefined

  • setup 的参数

  • props:值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性

  • context: 上下文对象

  • attrs:值为对象，包含：组件外部传递过来，但没有在 props 配置中声明的属性，相当于 this.$attrs

  • slots: 收到的插槽内容，相当于 this.$slots

  • emit: 触发自定义事件的函数，相当于 this.$emit

  • slot="xxx" v-slot:xxx

7、计算属性与监视

1、computed 函数

  • 与 Vue2.x 中的 computed 配置功能一致

  • 写法

2、watch 函数
  • 与 Vue2.x 中 watch 配置功能一致
  • 两个小“坑”

  • 监视 reactive 定义的响应式数据时：oldValue 无法正确获取，强制开启了深度监视(deep 配置失效)

  • 监视 reactive 定义的响应式数据中某个属性时：deep 配置有效

    // 情况一，监视ref定义的响应式数据
    watch(sum,(newValue,oldValue) => {
    console.log('sum变化了',newValue,oldValue)
    },{immediate:true})

    // 情况二、监视多个ref定义的响应式数据
    watch([sum,msg],(newValue,oldValue) => {
    console.log('sum或者msg变化了',newValue,oldValue)
    },{immediate:true})

    /** 情况三，监视reactive定义的响应式数据
    * 若watch监视的是reactive定义的响应式数据，则无法正确获得oldValue!
    * 若watch监视的是reactive定义的响应式数据，则强制开启了深度监视
    */
    watch(person,(newValue,oldValue) => {
    console.log('person变化了',newValue,oldValue)
    },{immediate:true,deep: false}) // 此处的deep配置不在奏效

    // 情况四，监视reactive定义的响应式数据中的某个属性
    watch(() => person.name,(newValue,oldValue) => {
    console.log('person的jname变化了',newValue,oldValue)
    },{immediate:true,deep: true})

    // 情况五、监视reactive定义的响应式数据中的某些属性
    watch([() => person.name,() => person.age],(newValue,oldValue) => {
    console.log('person的name或age变化了',newValue,oldValue)
    })

    // 特殊情况
    watch(() => person.job,(newValue,oldValue) => {
    console.log('person的job变化了',newValue,oldValue)
    },{deep: true}) // 此处由于监视的是reactive素定义的对象中的某个属性，所以deep配置有效

3、watchEffect 函数

  • watch 的套路是：既要指明监视的属性，也要指明监视的回调

  • watchEffect 的套路是：不用指明监视哪个属性，监视的回调中用哪个属性，那就监视哪个属性

  • watchEffect 有点像 computed

  • 但 computed 注重的计算出来的值（回调函数的返回值），所以必须要写返回值

  • 而 watchEffect 更注重的是过程（回调函数的函数体），所以不用写返回值

    // watchEffect所指定的回调中用到的数据只要发生变化，则直接重新执行回调
    watchEffect(() => {
    const x1 = sum.value;
    const x2 = person.age;
    console.log('watchEffect配置的回调执行了')
    })

8、生命周期

  • 通过配置项的形式使用生命周期钩子
  • beforeCreate
  • created
  • beforeMount
  • mounted
  • beforeUpdate
  • updated
  • beforeUnmount 在组件被取消挂载时触发。
  • unmounted 在组件被取消挂载后触发。
  • beforeDestroy 销毁
  • destroyed

  • Vue3.0 也提供了 Composition API 形式的生命周期钩子，与 Vue2.x 中钩子对应关系如下

  • beforeCreate ---> setup()

  • created ---> setup()

  • beforeMount ---> onBeforeMount

  • mounted ---> onMounted

  • beforeUpdate ---> onBeforeUpdate

  • updated ---> onUpdated

  • beforeUnmount ---> onBeforeUnmount 卸载

  • unmounted ---> onUnmounted

    onBeforeMount(() => {
    })

  • 先调用子组件，后调用父组件

9、自定义 hook 函数

  • 什么是 hook?---本质是一个函数，把 setup 函数中使用的 Composition API 进行了疯转。
  • 类似于 vue2.x 中的 mixin
  • 自定义 hook 的优势，复用代码，让 setup 中的逻辑更清楚易懂

  • App.vue

  • hook/usePoint.js

    import { onBeforeUnmount, onMounted, reactive } from "vue";

    export default function () {
    // 实现鼠标“打点”相关的数据
    let point = reactive({
    x: 0,
    y: 0,
    });
    // 实现鼠标“打点”相关的方法
    function savePoint(event) {
    point.x = event.pageX;
    point.y = event.pageY;
    }
    // 实现鼠标“打点”相关的生命周期钩子
    onMounted(() => {
    window.addEventListener("click", savePoint);
    });
    onBeforeUnmount(() => {
    window.removeEventListener("click", savePoint);
    });
    return point;
    }

10、toRef

  • 作用：创建一个 ref 对象，其 value 值指向另一个对象中的某个属性

  • 语法：const name = toRef(person,'name')

  • 应用：要将响应式对象中的某个属性单独提供给外部使用时。

  • 扩展：toRefs 与 toRef 功能一致，但可以批量创建多个 ref 对象，语法：toRefs(person)

三、其它 Composition API

1、shallowReactive 与 shallowRef

  • shallowReactive: 只处理对象最外层属性的响应式(浅响应式)
  • shallowRef: 只处理基本数据类型的响应式，不进行对象的响应式处理
  • 什么时候使用？
  • 如果有一个对象数据，结构比较深，但变化时只是外层属性变化 ===> shallowReactive
  • 如果有一个对象数据，后续功能不会修改该对象中的属性，而是生新的对象来替换 ===> shallowRef

2、readonly 与 shallowReadonly

  • readonly：让一个响应式数据变为只读的（深只读）
  • shallowReadonly：让一个响应式数据变为只读的（浅只读）
  • 应用场景：不希望数据被修改时

3、toRaw 与 markRaw

  • toRaw:

  • 作用：将一个由 reactive 生成的响应式对象转为普通对象

  • 使用场景：用于读取响应式对象的普通对象，对这个普通对象的所有操作，不会引起页面更新。

  • markRaw:

  • 作用：标记一个对象，使其永远不会再成为响应式对象。

  • 应用场景：

  • 1、有些值不应该被设置为响应式的，例如复杂的第三方类库等。

  • defineExpose
  • defineProps 只接收
  • defineProps(['list'])
  • 接收限制类型
  • defineProps<{list:类型}>()
  • 接收限制类型限制必要性，指定默认值
  • withDefaults 默认值

路由 route

  • useRoute

  • useRouter

    import {useRouter } from "vue-router"
    const router = useRouter()
    onMounted(() => {
    router.push('/about')
    })

  • 路由器 router

  • 编程式导航

  • $router

  • $route

posted @ 2025-09-16 14:15  不完美的完美  阅读(50)  评论(0)    收藏  举报