欢迎各位兄弟 发布技术文章
这里的技术是共享的
- 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
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