You are here
vue3 ref函数 有大用
星期一, 2022-06-27 11:54 — adminshiping1
- import { ref } from 'vue';
- function useChangeCount() {
- let count = ref(0);
- function change_count() {
- count.value += 1;
- }
- return { count, change_count }
- }
- export default useChangeCount;
- setup() {
- let { count, change_count } = useChangeCount();
- return { count, change_count };
- }
- <template>
- <div>
- <h1>{{ count }}</h1>
- <button @click="change_count">点我</button>
- </div>
- </template>
在
setup中定义的变量或方法，都必须通过return {xxx,xxx}暴露出去，外界才能使用ref函数仅能监听基本类型的变化，不能监听复杂类型的变化（比如对象、数组）
来自 https://blog.csdn.net/lhjuejiang/article/details/114675890
vue3 ref函数用法
1.在setup函数中，可以使用ref函数，用于创建一个响应式数据，当数据发生改变时，Vue会自动更新UI
- <template>
- <div>
- <h1>{{mycount}}</h1>
- <button @click="changeMyCount">changeMyCount</button>
- </div>
- </template>
- <script>
- import { ref } from "vue";
- export default {
- name: "ref",
- setup(){
- const mycount = ref(2);
- const changeMyCount = ()=>{
- mycount.value = mycount.value + 2 ;
- }
-
- return {
- mycount,
- changeMyCount,
- }
- }
- };
- </script>
ref函数仅能监听基本类型的变化，不能监听复杂类型的变化（比如对象、数组）
监听复杂类型的变化可以使用reactive函数
2.通过ref属性获取元素
vue3需要借助生命周期方法，在setup执行时，template中的元素还没挂载到页面上，所以必须在mounted之后才能获取到元素。
- <template>
- <div>
- <div ref="box"><button>hehe</button></div>
- </div>
- </template>
- <script>
- import { ref } from "vue";
- export default {
- name: "ref",
- setup(){
- const box = ref(null)
- onMounted(()=>{
- console.log(box.value)
- })
- }
- };
- </script>
来自 https://blog.csdn.net/wuxing164/article/details/109800885
普通分类: