AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

VUE3（三十八）Vue3.2子父组件交互（vue、ts分离）

2023-12-14 220
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： VUE3（三十八）Vue3.2子父组件交互（vue、ts分离）

最开始，尝试VUE3.2的子父组件调用的时候，我是将html代码和TS代码都写在了一个文件中，这样写比较简单，但是在后期维护的时候可能会比较麻烦，还是分文件写，html代码就放到VUE文件中，TS代码就放到TS中，这样最好。

 


那首先，我们先来改造我们的自定义组件menu


改造前的代码参照：《VUE3（三十七）Vue3.2子父组件交互（vue、ts不分离）》


这里先放一下改造后的代码：


Menu.vue


<template>
  <!-- 手机底部菜单（别问我为什么把现成的组件又封了一个自定义组件，问就是为了试试子传父、父传子、子调父、父调子） -->
  <van-tabbar
    v-model="active"
    @change="onChange"
    active-color="#24657D"
    inactive-color="#323233"
  >
    <van-tabbar-item icon="wap-home" to="/phone/index">首页</van-tabbar-item>
    <van-tabbar-item icon="font" to="/phone/gossip">杂谈</van-tabbar-item>
    <van-tabbar-item icon="comment" to="/phone/placeFile">归档</van-tabbar-item>
    <van-tabbar-item icon="friends" to="/phone/personal">我的</van-tabbar-item>
  </van-tabbar>
</template>
<script lang="ts" setup>
import { defineExpose, defineProps } from "vue";
import {
  // 这里是方法
  Mounted,
  getIndexDataList,
  getOtherData,
  getPlaceFileData,
  getPersonalData,
  getUserSessionData,
  onChange,
  test,
  // 这里是变量
  active,
} from "/@/assets/js/components/phone/Menu";
// ====================================================
// 将组件中的属性暴露出去，这样父组件可以调用
defineExpose({
  getIndexDataList,
  getOtherData,
  getPlaceFileData,
  getPersonalData,
});
// ====================================================
// 接受父组件  传递来的参数
const props = defineProps({
  activeDefine: {
    type: String,
    default: "",
  },
});
// 父组件传递来的参数赋值 子组件中的参数
active.value = parseInt(props.activeDefine);
console.log(props);
// ====================================================
// 测试参数传递
test(props.activeDefine);
// ====================================================
// 调用生命周期函数
Mounted();
</script>

 

上方的代码中，我们需要注意以下几个问题：


1：defineExpose、defineProps 两个函数必须在setup下调用才可以。


2：defineExpose是用来暴露子组件参数及方法的。


3：defineProps是用来接受父组件传递给子组件参数的。


4：父组件传递过来的参数，可以通过函数传参调用传递在TS文件的方法中处理。


 

我们在来看一下组件对应的TS文件：


Menu.ts


import { reactive, ref, toRefs,onMounted,defineEmits,defineExpose,defineProps } from "vue";
// 引入axios钩子
import axios from "/@/request/axios";
// 引入路由
import { useRouter, useRoute } from "vue-router";
// 引入公共js文件
import utils from "/@/assets/js/public/function";
// api 接口文件
import {
    getIndexData,
    getRemarkList,
    getFileList,
    getUserSession,
} from "/@/api/phone/index";
import { common, userinfo } from "/@/hooks/common";
import { Toast } from "vant";
const data = reactive({
    // tabbar 默认选中索引
    active: 0,
});
/**
 * @name: 将data绑定值dataRef
 * @author: camellia
 * @email: guanchao_gc@qq.com
 * @date: 2022-01-10
 */
export const { active } = toRefs(data);
/**
 * @name: 调用生命周期onMounted
 * @author: camellia
 * @email: guanchao_gc@qq.com
 * @date: 2023-01-10
 */
export const Mounted = () => {
    onMounted( ()=>{
        // =============================================
        // 初始调用
        getUserSessionData();
    });
}
/**
 * @name: tabbar 发生改变时
 * @author: camellia
 * @email: guanchao_gc@qq.com
 * @date: 2022-08-11
 * @param:  index   number  索引
 */
export const onChange = (index:any): void => { };
/**
 * @name: 获取首页数据公共方法
 * @author: camellia
 * @email: guanchao_gc@qq.com
 * @date: 2022-08-11
 * @param:  page    number  页码
 * @param:  search  string  搜索值
 * @param:  category_id number  分类
 */
export const getIndexDataList = async(
    page: number = 1,
    search: string = "",
    category_id: number = 0,
    sign: boolean = true
): Promise<any> => {
    const dataLists = ref<any>();
    const actives = ref<number>(0);
    // 判断是否为数字
    if (parseFloat(page).toString() == "NaN") {
        page = 1;
    }
    // 请求数据
    // getUserSessionData();
    try {
        Toast.loading({
            message: "加载中...",
            forbidClick: true,
        });
        // utils.alertLoadExec(true);
        let param = {
            page: page,
            search: search,
            category_id: utils.encryptCode({ category_id: category_id }),
        };
        await getIndexData(param).then(function (response: any) {
            response.page = page;
            response.category_id = category_id;
            // console.log(response);
            // 传递数据给父组件
            // $myemit("getIndexDataList", response);
            dataLists.value = response;
            utils.sleep(1500).then(() => {
                // 这里写sleep之后需要去做的事情
                Toast.clear();
            });
        });
    } catch (error) {
        console.log("chucuole");
        // 自定义loading消失
        // utils.alertLoadExec(false);
        Toast.clear();
    }
    actives.value = 0;
    // 返回参数
    return {dataLists,actives}
};
/**
 * @name: 获取杂谈页数据
 * @author: camellia
 * @email: guanchao_gc@qq.com
 * @date: 2022-08-11
 * @param:  page    number  页码
 */
export const getOtherData = async(sign: Boolean = true): Promise<any> => {
    Toast.loading({
        message: "加载中...",
        forbidClick: true,
    });
    const result = ref<any>();
    const actives = ref<number>(0);
    try {
        let param = {};
        await getRemarkList(param).then(function (response: any) {
            // 传递数据给父组件
            // $myemit("getOtherData", response);
            result.value = response;
            utils.sleep(1500).then(() => {
                // 这里写sleep之后需要去做的事情
                Toast.clear();
            });
        });
    } catch (error) {
        console.log("chucuole");
        Toast.clear();
    }
    actives.value = 1;
    // 返回参数
    return {result,actives};
};
/**
 * @name: 去归档页
 * @author: camellia
 * @email: guanchao_gc@qq.com
 * @date: 2022-08-11
 */
export const getPlaceFileData = async(sign: Boolean = true): Promise<any> => {
    // utils.alertLoadExec(true);
    Toast.loading({
        message: "加载中...",
        forbidClick: true,
    });
    const result = ref<any>();
    const actives = ref<number>(0);
    // 请求数据
    try {
        let param = {};
        await getFileList(param).then(function (response: any) {
            // 传递数据给父组件
            // $myemit("getPlaceFileData", response);
            result.value = response;
            utils.sleep(5000).then(() => {
                // 这里写sleep之后需要去做的事情
                Toast.clear();
            });
        });
    } catch (error) {
        console.log("chucuole");
        Toast.clear();
    }
    actives.value = 2;
    // 返回参数
    return {result,actives};
};
/**
 * @name: 去个人中心页
 * @author: camellia
 * @email: guanchao_gc@qq.com
 * @date: 2022-08-11
 */
export const getPersonalData = (): any => {
    // data.active = 3;
    const actives = ref<number>(0);
    actives.value = 3;
    // 返回参数
    return {actives};
};
/**
 * @name: 获取用户登录信息
 * @author: camellia
 * @email: guanchao_gc@qq.com
 * @date: 2022-07-18
 */
export const getUserSessionData = (): void => {
    try {
        let param = {};
        getUserSession(param).then(function (response: any) {
            userinfo.email = response.email;
            userinfo.figureurl = response.figureurl;
            userinfo.nickname = response.nickname;
            userinfo.userid = response.userid;
        });
    } catch (error) {
        console.log("登录信息出错！");
    }
};
/**
 * @name: 测试参数传递
 * @author: camellia
 * @email: guanchao_gc@qq.com
 * @date: 2022-07-18
 */
export const test = (val:any) => {
    console.log(val)
}

 

这个原理其实跟后端语言的原理很像，就是调用函数，然后接受函数的返回值，我这里的调用原理是，父组件调用子组件的方法，子组件的方法请求数据库，再将获取到的数据返回给父组件，父组件拿到数据之后，进行页面渲染。基本原理就是这个样子。


需要注意，数据请求是Promise异步请求，我们需要使用async和await来将数据赋值给我们定义的变量（详细使用参考上方代码）。


剩下的代码其实就没什么可说的了，将获取到的数据赋值到ref绑定的变量中，return就可以了（也可以绑定到普通变量上）

 


下边，我们来说一下父组件是如何调用子组件的。


父组件：index.vue


<template>
  <!-- header -->
  <div class="header">
    <van-nav-bar title="时间里的" />
    <!-- 搜索框 -->
    <van-search
      v-model="search"
      show-action
      placeholder="请输入搜索关键词(本站采用sphinx搜索引擎)"
    >
      <template #action>
        <div @click="getSearchData">搜索</div>
      </template>
    </van-search>
    <!-- <van-search v-model="search" placeholder="请输入搜索关键词(本站采用sphinx搜索引擎)" clearable @click-left-icon="getSearchData" /> -->
  </div>
  <!-- body -->
  <!-- <van-pull-refresh v-model="loading" @refresh="onRefresh"> -->
  <div class="body">
    <van-tabs v-model:active="menuActive" animated @click-tab="onClickTab">
      <!-- 全部 -->
      <van-tab title="全部" name="0">
        <div
          class="article"
          v-for="(item, index) in dataList"
          :key="index"
          @click="jumpArticleDetail(item.id)"
        >
          <div class="title" v-html="item.arttitle"></div>
          <div class="desc">
            <div class="left-div">
              <div class="author">{{ item.another }} | {{ item.putime }}</div>
              <div class="desc-show" v-html="item.artdesc"></div>
            </div>
            <div class="right-div">
              <img :src="item.artlogo" style="width: 100%" class="lazyload" />
            </div>
          </div>
          <div class="label">
            <div class="label-left">
              <van-icon name="browsing-history-o" />&nbsp;{{ item.click_num }}
            </div>
            <div class="label-right">
              {{ item.labelStr }}
            </div>
          </div>
        </div>
        <div class="next-page" @click="nextPage" v-if="articlePage > page">
          点击加载下一页
        </div>
      </van-tab>
      <!-- 循环 -->
      <van-tab
        v-for="(it, ind) in categoryList"
        :key="ind"
        :title="it.cat_name"
        :name="it.id"
      >
        <div
          class="article"
          v-for="(item, index) in dataList"
          :key="index"
          @click="jumpArticleDetail(item.id)"
        >
          <div class="title" v-html="item.arttitle"></div>
          <div class="desc">
            <div class="left-div">
              <div class="author">{{ item.another }} | {{ item.putime }}</div>
              <div class="desc-show" v-html="item.artdesc"></div>
            </div>
            <div class="right-div">
              <img :src="item.artlogo" style="width: 100%" class="lazyload" />
            </div>
          </div>
          <div class="label">
            <div class="label-left">
              <van-icon name="browsing-history-o" />&nbsp;{{ item.click_num }}
            </div>
            <div class="label-right">
              {{ item.labelStr }}
            </div>
          </div>
        </div>
        <div class="next-page" @click="nextPage" v-if="articlePage > page">
          点击加载下一页
        </div>
      </van-tab>
    </van-tabs>
  </div>
  <img
    src="https://resource.guanchao.site/uploads/gotop/timg.png"
    class="go_top"
    @click="goToTop"
  />
  <!-- </van-pull-refresh> -->
  <!-- navbar -->
  <div class="footer">
    <!-- <Menu @getIndexDataList="goIndex" ref="MenuRef" /> -->
    <Menu @getIndexDataList="goIndex" ref="MenuRef" activeDefine="0" />
  </div>
</template>
<script lang="ts" setup>
// import { ref, onMounted } from "vue";
// 引入子组件
import Menu from "/@/components/phone/Menu.vue";
import {
  // 这里是方法
  goToTop,
  jumpArticleDetail,
  goIndex,
  getSearchData,
  nextPage,
  onClickTab,
  Mounted,
  // 这里是变量
  search,
  page,
  dataList,
  categoryList,
  articlePage,
  loading,
  menuActive,
} from "/@/assets/js/phone/index";
// ==================================================================
// 调用生命周期函数
const { MenuRef } = Mounted();
</script>


上方代码，需要注意一下几点：


1：必须在setup下引入子组件：


// 引入子组件
import Menu from "/@/components/phone/Menu.vue";


2：子组件实例需要在函数中return回来：


// ==================================================================
// 调用生命周期函数
const { MenuRef } = Mounted();

 


父组件：index.ts

import {
    PropType,
    ref,
    watch,
    reactive,
    toRefs,
    provide,
    inject,
    onBeforeMount, // 在组件挂载之前执行的函数
    onMounted,
    nextTick,
} from "vue";
// 引入路由
import router from "/@/router";
// 引入路由
import { useRouter, useRoute } from "vue-router";
// 引入公共js文件
import utils from "/@/assets/js/public/function";
// 引入子组件
import Menu from "/@/components/phone/Menu.vue";
import { common, userinfo } from "/@/hooks/common";
import { Toast } from "vant";
// =============================================================================
// 实例化路由
// const router = useRouter();
// const route = useRoute();
/**
 * @name: 声明data
 * @author: camellia
 * @email: guanchao_gc@qq.com
 * @date: 2022-01-18
 */
const data = reactive({});
/**
 * @name: 将data绑定值dataRef
 * @author: camellia
 * @email: guanchao_gc@qq.com
 * @date: 2022-01-10
 */
export const {} = toRefs(data);
// ===============================================================================
// 子组件相关
/**
 * @name: 定义子组件暴露给父组件的值属性列表
 * @author: camellia
 * @email: guanchao_gc@qq.com
 * @date: 2022-07-18
 */
interface menuData {
    goIndex: () => void;
    getIndexDataList: () => void;
    homeColor: string;
    otherColor: string;
    placeFileColor: string;
    personalColor: string;
}
// ===============================================================================
// 方法
// 页码
export let page = ref<any>(0);
// 子分类id
export let category_id = ref<any>(0);
// 是否请求
export let req = ref<any>(true);
// 文章列表
export let dataList = ref(Array<any>());
// 分类列表
export let categoryList = ref(Array<any>());
// 页码（控制加载下一页是否显示）
export let articlePage = ref(<number>1);
// 下拉刷新标识
export let loading = ref(<boolean>false);
// 搜索值
export let search = ref(<string>"");
// 首页分类菜单默认选中
export let menuActive = ref<number>(0);
// 底部菜单
export let active = ref<number>(0);
// ===============================================================================
// 子组件ref（TypeScript语法）下面这这两种写法也可以，推荐使用Typescript语法
// 子组件menu的对象
export const MenuRef = ref<InstanceType<typeof Menu> & menuData>();
// const MenuRef = ref<InstanceType<typeof Menu>>()
// const MenuRef = ref(null)
/**
 * @name: 调用生命周期onMounted
 * @author: camellia
 * @email: guanchao_gc@qq.com
 * @date: 2023-01-10
 */
export const Mounted = () => {
    onMounted( async()=>{
        const route = useRoute();
        page.value = route.query.page ?? 1;
        category_id.value = route.query.category_id ?? 0;
        req.value = route.query.req ?? true;
        // MenuRef.value = ref<InstanceType<typeof Menu> & menuData>();
        // console.log('获取子组件中的性别', MenuRef.value );
        // console.log('获取子组件中的其他信息', MenuRef.value?.info );
        // console.log('获取子组件中的其他信息', MenuRef.value?.homeColor );
        // 执行子组件方法
        const {dataLists,actives} = await MenuRef.value?.getIndexDataList(page.value);
        // console.log(dataLists.value.articleShow);
        // console.log(actives.value);
        dataList.value = dataLists.value.articleShow;
        categoryList.value = dataLists.value.cateList;
        articlePage.value = dataLists.value.articlePage;
        active.value = actives.value;
    });
    return {MenuRef};
}
/**
 * @name:滚动条回顶部
 * @author: camellia
 * @email: guanchao_gc@qq.com
 * @date: 2022-07-18
 */
export const goToTop = () => {
    // 滚动条回顶部
    let json = document.getElementById("body");
    if (json != null)
    {
        json.scrollTop = 0;
    }
};
/**
 * @name: 下拉刷新方法
 * @author: camellia
 * @email: guanchao_gc@qq.com
 * @date: 2022-07-18
 */
export const onRefresh = async():Promise<void> => {
    let result:any;
    const categoryList = ref(Array<any>());
    const articlePage = ref(Array<any>());
    const active = ref<number>(0);
    // 执行子组件方法
    const {dataLists,actives} = await MenuRef.value?.getIndexDataList(page.value);
    // console.log(result);
    dataList.value = dataLists.value.articleShow;
    categoryList.value = dataLists.value.cateList;
    articlePage.value = dataLists.value.articlePage;
    active.value = actives.value;
    Toast("刷新成功");
    loading.value = false;
};
/**
 * @name: 跳转文章详情页
 * @author: camellia
 * @email: guanchao_gc@qq.com
 * @date: 2022-07-18
 * @param:  category_id number  分类
 */
export const jumpArticleDetail = (article_id: Number) => {
    router.push({
        path: "/phone/articleDetail",
        query: {
        article_id: utils.encryptCode({ article_id: article_id }),
        path: "index",
        },
    });
};
/**
 * @name: 子组件向父组件抛出的方法
 * @author: camellia
 * @email: guanchao_gc@qq.com
 * @date: 2022-07-18
 */
export const goIndex = (response: any): void => {
    try
    {
        page.value = response.page;
        category_id.value = response.category_id;
        if (page.value > 1)
        {
            // 数组合并
            dataList.value.push(...response.articleShow);
        }
        else
        {
            // 数组赋值
            dataList.value = response.articleShow;
        }
        categoryList.value = response.cateList;
        articlePage.value = response.articlePage;
    }
    catch (error)
    {
        console.log("出错了");
    }
};
/**
 * @name: 获取搜索数据
 * @author: camellia
 * @email: guanchao_gc@qq.com
 * @date: 2022-07-18
 */
export const getSearchData = async():Promise<void> => {
    page.value = 1;
    const {dataLists,actives} = await MenuRef.value?.getIndexDataList(page.value, search.value, category_id.value);
    dataList.value = dataLists.value.articleShow;
    categoryList.value = dataLists.value.cateList;
    articlePage.value = dataLists.value.articlePage;
    active.value = actives.value;
};
/**
 * @name: 加载下一页数据
 * @author: camellia
 * @email: guanchao_gc@qq.com
 * @date: 2022-07-18
 */
export const nextPage = async() => {
    page.value += 1;
    // 调用子组件的方法
    const {dataLists,actives} = await MenuRef.value?.getIndexDataList(page.value, search.value, category_id.value);
    // 循环
    dataLists.value.articleShow.forEach((item:any) => {
        dataList.value.push(item);
    });
    categoryList.value = dataLists.value.cateList;
    articlePage.value = dataLists.value.articlePage;
    active.value = actives.value;
};
/**
 * @name: 获取分类下的文章列表
 * @author: camellia
 * @email: guanchao_gc@qq.com
 * @date: 2022-07-18
 */
export const onClickTab = async(obj: number) => {
    const categoryList = ref(Array<any>());
    const articlePage = ref(Array<any>());
    const active = ref<number>(0);
    category_id.value = obj;
    page.value = 1;
    // 调用子组件的方法
    const {dataLists,actives} = await MenuRef.value?.getIndexDataList(page.value, "", category_id.value);
    dataList.value = dataLists.value.articleShow;
    categoryList.value = dataLists.value.cateList;
    articlePage.value = dataLists.value.articlePage;
    active.value = actives.value;
    return {categoryList,articlePage,active};
};
/**
 * @name: nextTick 页面发生变化即渲染
 * @author: camellia
 * @email: guanchao_gc@qq.com
 * @date: 2022-07-18
 */
nextTick(() => {
/*// 获取子组件name
    console.log(MenuRef._value)
    console.log(MenuRef.__v_isRef)
    console.log(MenuRef.__v_isShallow)
    console.log(MenuRef._rawValue)
    console.log(MenuRef.value.count)
    // 加个问号这种写法，没有属性也不会报错
    console.log(MenuRef.value?.homeColor)
    // 执行子组件方法
    MenuRef.value.goIndex()//*/
});


关于上方代码，我们需要注意以下几点：


1：我使用TS来编写程序，先定义了一个接口，确定组件类型：


/**
 * @name: 定义子组件暴露给父组件的值属性列表
 * @author: camellia
 * @email: guanchao_gc@qq.com
 * @date: 2022-07-18
 */
interface menuData {
    goIndex: () => void;
    getIndexDataList: () => void;
    homeColor: string;
    otherColor: string;
    placeFileColor: string;
    personalColor: string;
}

 


2：在生命周期onMounted函数中将子组件实例化的对象返给index.vue文件：


/**
 * @name: 调用生命周期onMounted
 * @author: camellia
 * @email: guanchao_gc@qq.com
 * @date: 2023-01-10
 */
export const Mounted = () => {
    onMounted( async()=>{
        const route = useRoute();
        page.value = route.query.page ?? 1;
        category_id.value = route.query.category_id ?? 0;
        req.value = route.query.req ?? true;
        // 执行子组件方法
        const {dataLists,actives} = await MenuRef.value?.getIndexDataList(page.value);
        dataList.value = dataLists.value.articleShow;
        categoryList.value = dataLists.value.cateList;
        articlePage.value = dataLists.value.articlePage;
        active.value = actives.value;
    });
    return {MenuRef};
}

 


3：同样，在调用子组件的方法的时候，还是需要使用async和await方法的。


/**
 * @name: 下拉刷新方法
 * @author: camellia
 * @email: guanchao_gc@qq.com
 * @date: 2022-07-18
 */
export const onRefresh = async():Promise<void> => {
    let result:any;
    // 执行子组件方法
    const {dataLists,actives} = await MenuRef.value?.getIndexDataList(page.value);
    // console.log(result);
    dataList.value = dataLists.value.articleShow;
    categoryList.value = dataLists.value.cateList;
    articlePage.value = dataLists.value.articlePage;
    active.value = actives.value;
    Toast("刷新成功");
    loading.value = false;
};

 


到这里，就将上文中的代码分离开了。

 


有好的建议，请在下方输入你的评论。


文章标签：
JavaScript
前端开发
数据库
关键词：
ts VUE.js
vue3 ts VUE.js
vue3分离VUE.js
分离VUE.js
vue3 vue VUE.js
camellia。
目录
相关文章
游客62mqllx53nctc
|
16天前
|
存储 JavaScript 前端开发
vue3的脚手架模板你真的了解吗？里面有很多值得我们学习的地方！
【10月更文挑战第21天】 vue3的脚手架模板你真的了解吗？里面有很多值得我们学习的地方！
游客62mqllx53nctc
43 3
vue3的脚手架模板你真的了解吗？里面有很多值得我们学习的地方！
刘大猫.
|
19天前
|
API
vue3知识点：provide 与 inject
vue3知识点：provide 与 inject
刘大猫.
28 4
vue3知识点：provide 与 inject
刘大猫.
|
19天前
|
API
vue3知识点：readonly 与 shallowReadonly
vue3知识点：readonly 与 shallowReadonly
刘大猫.
24 1
vue3知识点：readonly 与 shallowReadonly
CamilleKing
|
13天前
|
JavaScript 前端开发 开发者
Vue 3中的Proxy
【10月更文挑战第23天】Vue 3中的`Proxy`为响应式系统带来了更强大、更灵活的功能，解决了Vue 2中响应式系统的一些局限性，同时在性能方面也有一定的提升，为开发者提供了更好的开发体验和性能保障。
CamilleKing
30 7
小宋1021
|
14天前
|
前端开发 数据库
芋道框架审批流如何实现(Cloud+Vue3)
芋道框架审批流如何实现(Cloud+Vue3)
小宋1021
36 3
CamilleKing
|
13天前
|
JavaScript 数据管理 Java
在 Vue 3 中使用 Proxy 实现数据双向绑定的性能如何？
【10月更文挑战第23天】Vue 3中使用Proxy实现数据双向绑定在多个方面都带来了性能的提升，从更高效的响应式追踪、更好的初始化性能、对数组操作的优化到更优的内存管理等，使得Vue 3在处理复杂的应用场景和大量数据时能够更加高效和稳定地运行。
CamilleKing
33 1
CamilleKing
|
13天前
|
JavaScript 开发者
在 Vue 3 中使用 Proxy 实现数据的双向绑定
【10月更文挑战第23天】Vue 3利用 `Proxy` 实现了数据的双向绑定，无论是使用内置的指令如 `v-model`，还是通过自定义事件或自定义指令，都能够方便地实现数据与视图之间的双向交互，满足不同场景下的开发需求。
CamilleKing
34 1
游客zi3qmblbcdexu
|
15天前
|
前端开发 JavaScript
简记 Vue3（一）—— setup、ref、reactive、toRefs、toRef
简记 Vue3（一）—— setup、ref、reactive、toRefs、toRef
游客zi3qmblbcdexu
31 1
大树营养快线
|
16天前
Vue3 项目的 setup 函数
【10月更文挑战第23天】setup` 函数是 Vue3 中非常重要的一个概念，掌握它的使用方法对于开发高效、灵活的 Vue3 组件至关重要。通过不断的实践和探索，你将能够更好地利用 `setup` 函数来构建优秀的 Vue3 项目。
大树营养快线
22 2
刘大猫.
|
19天前
|
JavaScript Java API
vue3知识点：setup
vue3知识点：setup
刘大猫.
27 5

热门文章

最新文章

  • 1
    vite 如何做到让 vue 本地开发更快速？
  • 2
    Vue $watch监听对象属性，数组内对象属性改变
  • 3
    Vue 3和Element组件库的分页功能实现
  • 4
    自制简单的range（Vue）
  • 5
    Vue打包后页面出现空白解决办法（臻享版）
  • 6
    一文梳理Vue3核心原理
  • 7
    Vue 监听输入框(input、textarea ...)粘贴事件获取图片、视频、文件、文件夹
  • 8
    vite原理之解析.vue文件
  • 9
    如何在 Vue 中使用 Chart.js - 手把手教你搭可视化数据图表
  • 10
    vue 里怎么使用 echarts 实现地图自动轮播功能、自定义 tooltip 悬浮位置提示、自定义 label 标签位置样式？
  • 1
    vue代码优化方案
    54
  • 2
    前端框架与库 - Vue.js基础：模板语法、数据绑定
    133
  • 3
    在Vue中，子组件向父组件传递数据
    73
  • 4
    【vue3】Argumnt of type ‘history:RouterHistory；}is not assignable to paraeter of type ‘RouterOptions‘.
    96
  • 5
    【vue3】vue3中路由hash与History的设置
    210
  • 6
    【Vue3】解决电脑分辨率125%、150%及缩放导致页面变形的问题
    1105
  • 7
    【vue】 el-table解决分页不能筛选全部数据的问题
    470
  • 8
    【vue】 vue2 监听滚动条滚动事件
    143
  • 9
    【天地图】vue 天地图 T is not defined
    173
  • 10
    【vue】 Tinymce 数据 回显问题 | 第一次正常回显后面，显示空白bug不能编辑
    608

    • 相关课程

    更多
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程
  • React 入门与实战
  • React 入门教程开发文档
  • Node.js 入门教程文档

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • Vue.js在前端服务化上的实践与探索
  • 利用编译将 Vue 组件转成 React 组件

    • 相关实验场景

    更多
  • 前端开发基础6：Node.js和LESS预编译工具
  • 搭建Node.js编程环境
    • 下一篇
    阿里云OSS设置跨域访问