首页 > 其他分享 >Vue中 name 有什么作用?data 为什么是函数而不是对象?

Vue中 name 有什么作用?data 为什么是函数而不是对象?

时间:2023-11-10 14:22:21浏览次数:29  
标签:Vue name 实例 组件 data 函数

Vue中 name 有什么作用?

  1. 项目使用 keep-alive 时,可搭配组件 name 进行缓存过滤

  2. DOM 做递归组件时需要调用自身 name

  3. vue-devtools 调试工具里显示的组见名称是由 vue 中组件 name 决定的

data 为什么是函数而不是对象?

  1. 组件中 data 是 Vue 的实例

  2. 组件共享 data 属性,当 data 的值是同一个引用类型的值时,改变其中一个会影响其它的 data

  3. 组件中的 data 写成一个函数,数据以函数返回值形式定义,这样每复用一次组件,就会返回一份新的 data,类似于给每个组件实例创建一个私有的数据空间,让各个组件实例维护各自的数据。而单纯的写成对象形式,就使得所有组件实例共用了一份 data,就会造成一个变了全都会变的结果

标签:Vue,name,实例,组件,data,函数
From: https://www.cnblogs.com/yuhuo123/p/17824016.html

相关文章

  • 博客管理系统|基于SpringBoot+Vue+ElementUI付费博客系统的设计与实现
    作者主页:编程指南针作者简介:Java领域优质创作者、博客专家、特邀作者、多年架构师设计经验、腾讯课堂常驻讲师主要内容:Java项目、毕业设计、简历模板、学习资料、面试题库、技术互助收藏点赞不迷路 关注作者有好处项目编号:BS-PT-089二,环境介绍语言环境:Java: jdk1.8数据库:Mysql......
  • Vue - 创建 Vue3 项目
    Vue-创建Vue3项目 需搭建项目Vue3+ts+sass1. 创建项目npmcreatevite@latest  2. 安装依赖tyarn  3. 启动项目yarndev  4. 处理其他配置问题1) 打开HelloWorld.vue页面,发现一些报红,报错解决:找到tsconfig.json文件, ......
  • Electron学习2 使用Electron-vue和Vuetify UI库
    Electron学习2使用Electron-vue和VuetifyUI库一、Electron-vue简介二、安装yarn三、创建Electron-vue项目1.关于electron-builder2.安装脚手架3.运行4.打包应用程序四、background.js说明1.引入模块和依赖:2.注册协议:3.创建窗口函数:4.生命周期事件和监听器:五、使用UI库......
  • vue兄弟组件共享数据
    1、vue2.x中,兄弟组件共享数据的方式EventBus。一、A组件importeventBusfrom"@/components/eventBus";exportdefault{methods:{send(){eventBus.$emit('share',this.str)}}}</script>二、eventBus.jsimportVuefrom"vue";......
  • vue3 Suspense
    在Vue.js3中,Suspense是一个用于处理异步组件的特殊组件,它允许你在等待异步组件加载时展示备用内容。这对于优化用户体验、处理懒加载组件或异步数据获取时非常有用。Suspense的主要目标是简化异步操作的状态管理和展示。下面是一个简单的例子,演示了如何在Vue.js3中使用Suspe......
  • 解决Vue中使用wangEditor富文本编辑器复制粘贴word文档携带内容样式文本问题
    前言:本文记录作者在vue项目中使用到wangEditor富文本编辑器复制粘贴功能所遇到的bug,故此把自己所遇到的坑及问题详细的记录下来。如果觉得作者写的不错,希望得到您的点赞/收藏/支持,如果有不同意见,欢迎下方评论区留言。一、自定义处理粘贴的文本内容1、配置自定义处理粘贴的文本内......
  • vue3 KeepAlive
    在Vue.js3中,<keep-alive>是一个抽象组件,用于保留其子组件状态,防止在切换组件时销毁它们。这对于在页面间切换时保留组件的状态或避免重复渲染特定组件非常有用。<keep-alive>主要用于缓存组件,以提高性能和用户体验。以下是一个简单的例子,演示了如何在Vue.js3中使用<keep-ali......
  • vue3 Teleport
    在Vue.js3中,Teleport是一种特殊的组件,用于在DOM树中的任何地方渲染其内容,而不受父组件的约束。这对于需要将组件的内容移动到DOM树的其他部分时非常有用,例如在模态框或弹出窗口中使用。Teleport提供了两个名为teleport和teleport-to的指令,用于定义内容的来源和目标位......
  • 直播实时数仓基于DataLeap开放平台在发布管控场景的业务实践
    更多技术交流、求职机会,欢迎关注字节跳动数据平台微信公众号,回复【1】进入官方交流群背景业务背景随着字节业务的高速增长,业务场景越来越丰富,业务基于数据做的决策也越来越多,对数据的时效性要求也越来越高。原有离线批处理的数据仓库已经无法满足诉求,因此需要打造一套同时具......
  • vuejs3.0 从入门到精通——动态组件
    动态组件一、App.vue<template><ul><!--使用ul标签替代了错误的url标签,用于展示列表--><liv-for='(item,index)intabList':key='index'@click="()=>{currentComponent.com=tabList[index].com}"><!--......