网站空间费用一年多少,iss服务器网站建设,学生个人网页制作简单教程,唐汉网站建设目录 1#xff0c;前言2#xff0c;解决2.1#xff0c;利用插件#xff0c;实现编译时转换2.2#xff0c;toRef 和 toRefs 1#xff0c;前言
Vue3 中为了保持响应性#xff0c;始终需要以 props.x 的方式访问这些 prop。这意味着不能够解构 defineProps 的返回值#… 目录 1前言2解决2.1利用插件实现编译时转换2.2toRef 和 toRefs 1前言
Vue3 中为了保持响应性始终需要以 props.x 的方式访问这些 prop。这意味着不能够解构 defineProps 的返回值因为得到的变量将不是响应式的、也不会更新。
以下面的父子组件为例
父组件
templateChildren :countcount /
/templatescript setup
import { ref, reactive } from vue;
import Children from ./components/Children.vue;
const count ref(0);
/script子组件
templatediv{{ count }}/div
/templatescript setup
const props defineProps({count: Number,
});let { count } props;
count;
console.log(props.count); // 0并不会发生变化
/script2解决
2.1利用插件实现编译时转换
原本 Vue3 是支持的 reactivity-transform后来废弃了。但是可以通过 Vue Macros 插件 来实现用法如下
1安装插件并在 vite 中配置。
npm i -D vue-macros/reactivity-transform// vite.config.js
import ReactivityTransform from vue-macros/reactivity-transform/viteexport default defineConfig({plugins: [ReactivityTransform()],
})2会在组件中自动生效。
templatediv{{ msg }}/divdiv{{ count }}/div
/templatescript setup
import { watchEffect } from vue;
const { msg, count } defineProps({msg: String,count: Number,
});watchEffect(() {// 会在 props 变化时打印console.log(msg, count);
});
/script3原理
先通过 vite-plugin-inspect 插件 来查看插件的中间状态。
npm i -D vite-plugin-inspect完整配置
// vite.config.js
import { defineConfig } from vite;
import vue from vitejs/plugin-vue;
import ReactivityTransform from vue-macros/reactivity-transform/vite;
import Inspect from vite-plugin-inspect;export default defineConfig({plugins: [vue(), ReactivityTransform(), Inspect()],
});本地启动后访问 http://localhost:5173/__inspect/ 可检查项目的模块和栈信息。 可以看到是做了转换通过 __props 来访问自然是响应式的。
watchEffect(() {console.log(msg, count);
});watchEffect(() {console.log(__props.msg, __props.count);
});问题来了这个 __props 是什么
我们再看下 vitejs/plugin-vue 这个插件的做了什么会发现编译单文件组件后setup 变为函数其中一个参数就是 __props 也就是传入的 props。 所以我们在 vue 单文件中也可以直接使用 __props 并不会报错。 2.2toRef 和 toRefs
toRef基于响应式对象上的一个属性创建一个对应的 ref这个 ref 与其源属性保持同步改变源属性的值将更新 ref 的值。
toRefs将一个响应式对象转换为一个普通对象这个普通对象的每个属性都是指向源对象相应属性的 ref。每个单独的 ref 都是使用 toRef() 创建的。
所以可以这样做
templatediv{{ _msg }}/divdiv{{ msg }}/divdiv{{ count }}/div
/templatescript setup
import { toRef, toRefs } from vue;
const props defineProps({msg: String,count: Number,
});// _msg 也是响应式的会随着 props.msg 改变。
const _msg toRef(props, msg);// msg, count也是响应式的会随着 props 改变。
const { msg, count } toRefs(props);
/script以上。
