vue中data的两种写法

最新推荐文章于 2024-06-21 09:43:57 发布
最新推荐文章于 2024-06-21 09:43:57 发布
阅读量4.4w 收藏 55
点赞数 21
分类专栏： vue 文章标签： vue javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_30433703/article/details/109312110
版权

vue中的data是写为对象好还是函数好

data为对象的写法

data:{
    message: '此时mustache表达式是通过data为对象来获取message的值'
  }

在这里插入图片描述

data为函数的写法

data(){
	return{
    	message: '此时mustache表达式是通过data为函数来获取message的值'
	}
  }

在这里插入图片描述

组件中访问data

组件对象也有一个data属性(也可以有methods等属性)，只是组件的data属性必须是一个函数且这个函数返回一个对象，对象内部保存着数据

组件的data属性是一个对象的情况会访问不到data中的数据

在这里插入图片描述

组件的data属性必须是一个函数且返回一个对象

<body>
<div id="app">
	<t1></t1>
</div>

<template id='template1'>
	<div>
		<h2 style='color:blue'>我是模板1</h2>
		<p style="color:red;font-size:50px">{{mm}}</p>
	</div>
</template>
	
<script>
new Vue({
  el: '#app',
  data:{},
  components:{
	  t1:{
  		template:'#template1',
		data(){
			return{
				mm:'逗你玩'
			}
		}
	  }
  }
})
</script>
</body>

在这里插入图片描述

为什么组件的data属性必须是一个函数且返回一个对象

组件可以重复使用，当一个组件使用多次，就会多次访问一个data数据，从而类似共享复用。如果组件的data属性不是一个函数且返回一个对象，在这种一个组件多次使用的情况下就会共享一个数据。
下面的例子就可以说明data属性是一个函数且返回一个对象的好处：

<body>
<div id="app">
	<t1></t1>
	<t1></t1>
	<t1></t1>
	<t1></t1>
</div>

<template id='template1'>
	<div>
		<button @click="count--">-</button>
		计数:{{count}}
		<button @click="count++">+</button>
	</div>
</template>
	
<script>
new Vue({
  el: '#app',
  data:{},
  components:{
	  t1:{
  		template:'#template1',
		data(){
			return{
				count:0
			}
		}
	  }
  }
})
</script>
</body>

Brrby
关注
  • 21
    点赞
  • 踩
  • 55
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 6
    评论
专栏目录
VUE——data配置项详细解析
施益明的博客
11-01 1万+
VUE——data配置项详细解析
vue开发中遇到的问题
07-14
在`Item.vue`文件中，定义了一个简单的列表项组件，它接收`index`和`source`两个prop，分别表示当前项的索引和数据源。 关于Vue 2.0+的TypeScript写法，我们在组件声明中使用`@Component`装饰器来注册组件和定义...
vue中data()和data{}的区别
关北道.
07-08 1769
使用对象方式定义数据时，如果将一个组件作为另一个组件的子组件使用时，两个组件会共享同一个data对象，这就导致如果一个组件修改data对象属性的值，另一个组件中data对象相同属性的值也会修改，这个问题就是共享数据。但是使用函数方式定义数据事，每个组件示例都会调用一次data函数，返回一个新的data对象，这就避免了数据共享问题。在vue中，data用于定义组件中所用到的数据，可以使用函数或者对象的方式来定义。
vue中的 data(){}、components:{}、methods:{}、props:{}的使用方法
负数
01-14 9211
data(){}定义属性 ( 返回一个对象) components:{}（组件 要注册的组件） methods:{} （事件处理 点击函数所放置的位置） props:{} （父传子 数据传递） 应用 App.vue中 &lt;template&gt; &lt;ul&gt; &lt;my-li v-for="(item,index...
Vue配置项data
最新发布
weixin_45134711的博客
06-21 1152
对象式对于根实例或者非复用组件，通常直接提供一个对象字面量作为data的值。在对象式中，data属性是一个普通的对象，并且直接作为组件实例的一个属性// 对象形式 (适用于根实例或非复用组件)new Vue({data: {',count: 0,user: {age: 30},// 其他选项...})data是一个普通的对象，通过对象属性初始化数据优点：语法简洁，直观易懂。可以通过对象字面量的方式一次性定义多个属性，方便管理多个数据。
06~vue中data选项以及计算属性和方法的区别
俗人世界
09-08 388
计算属性优于方法的地方在于: 计算属性只要依赖值不变, 就不会重新计算, 不管调用多少次, 都只计算一次; 方法的话, 虽然同样可以实现想要的效果, 但多次调用, 会执行很多次
【Vue 组件data函数】
武帝为此的博客
10-10 1098
data。
vue 选项、数据 ：data
wwwkm123的博客
07-02 4303
data 类型：object|Function 限制：组件的定义只接受function Vue实例的数据对象，Vue将会递归data的property转化为getter/setter，从而将data响应数据变化。 对象必须是纯粹的对象（含有0或多个key/value对）：浏览器API创建的原生对象，原型上的property会被忽略。 大概来说，data应该只能是数据。 实例创建之后，可以通过vm.$data访问原始数据对象。Vue 实例也代理了 data 对象上所有的 property，因...
Vue之data选项
玉案轩窗的博客
01-30 3653
前言 本篇是分析new Vue()过程中对于data的处理细节以及响应式原理，主要了解如下两点： Vue实例的data选项具体的逻辑 Vue响应式原理学习 data处理逻辑 下面是Vue实例创建中initState的处理逻辑： initState的处理逻辑是处理组件中选项即props、data、computed、watch、methods，而关于data部分的处理逻辑，具体如下： opts.data ? initData(vm) : observe(vm._data = {}, true); 首先看
vue data声明区别 data:{} 与 data(){return {}}
weixin_42926528的博客
03-26 5464
data:{} 这种可以直接挂在vue实例上 var vm = new Vue({ el:'#app', data:{ title:'HELLO,WORLD!' } }) data(){ return{} } 组件是一个可复用的实例，当你引用一个组件的时候，组件里的data是一个普通的对象，所有用到这个组件的都引用的同一个data，就会造成数据污染。 不使用return包裹的数据会在项目的全局可见，会造成变量污染； 使用ret
Vue数据（data）方法（methods）、计算（computed）的介绍使用
y17757773039的博客
09-08 6250
今天学习的vue的一些基本方法属性（data，methods，computed）
vue实现多个玫瑰图的写法 grid布局 实现模拟切换参数
06-05
在Vue中，我们可以借助ECharts或者AntV G2Plot这两个流行的图表库来绘制玫瑰图。 1. **ECharts的玫瑰图实现**： ECharts是一款由百度开源的数据可视化库，支持多种图表类型，包括玫瑰图。在Vue项目中，你需要先...
vue组件中的样式属性scoped实例详解
10-17
有时我们需要对嵌套在子组件中的元素进行样式控制，这时可以使用深选择器，Vue 提供了两种写法： 1. `>>>`（部分预处理器如 SASS 不支持此写法） 2. `/deep/`（`>>>` 的别名，兼容性更好） 例如： ```html ....
vue学习笔记vue学习笔记
08-14
在 Vue 中，El 和 data 有两种写法。第一种写法是使用对象式，例如 `Const vm = new Vue({el:'#root',data:{ //data 的第一种写法：对象式 name:'JoJo'}})vm.$mount('#root')`。第二种写法是使用函数式，例如 `new ...
vue2+vue3学习笔记
02-20
`el` 和 `data` 都有两种写法。`el` 可以使用字符串或对象来描述容器，而 `data` 可以使用函数式或对象式来描述数据。 MVVM 模型 MVVM 模型是 Vue 的核心模型，即Model-View-ViewModel。Model 负责处理数据，View ...
vue入门到精通详解介绍（第一部分）data详细介绍
WYT11的博客
08-16 5933
第一章 引入vue脚本在html页面上 基本操作 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"
vue data的三种写法
lanxiaziyi的专栏
09-16 1201
vue data 的写法
vue中data为什么是函数
weixin_51040174的博客
05-21 1143
1、data是函数不会污染 <script> function Data(){ return{ name:'lxx', age:18 } } //在App.vue 导入import Child from "./components/Child"时 Child也是一个对象 //组件对象Child1有data属性 ，data:Data
Vue 组件中的 data 为什么是函数？
q4717529的博客
03-18 5688
一、总结 1.vue中组件是用来复用的，为了防止data复用，将其定义为函数。 2.vue组件中的data数据都应该是相互隔离，互不影响的，组件每复用一次，data数据就应该被复制一次，之后，当某一处复用的地方组件内data数据被改变时，其他复用地方组件的data数据不受影响，就需要通过data函数返回一个对象作为组件的状态。......
vue3生命周期 两种写法
08-24
Vue 3 的生命周期有两种不同的写法：Options API 和 Composition API。 1. Options API：这是 Vue 2.x 中常用的写法，通过在组件选项中定义生命周期钩子函数来实现。常见的生命周期钩子函数包括 `beforeCreate`、`created`、`beforeMount`、`mounted`、`beforeUpdate`、`updated`、`beforeUnmount` 和 `unmounted` 等。 示例代码如下： ```javascript export default { beforeCreate() { // 组件实例刚刚被创建，数据观测 (data observer) 和 event/watcher 事件配置之前被调用 }, created() { // 组件实例已经完全创建，数据观测 (data observer) 和 event/watcher 事件配置完成 }, beforeMount() { // 组件挂载之前被调用，相关的 render 函数首次被调用 }, mounted() { // 组件挂载完成后被调用，此时 DOM 已经渲染完毕 }, beforeUpdate() { // 组件更新之前被调用，发生在虚拟 DOM 打补丁之前 }, updated() { // 组件更新完成后被调用，此时 DOM 已经重新渲染 }, beforeUnmount() { // 实例销毁之前调用，在这一步，实例仍然完全可用 }, unmounted() { // 组件销毁后调用，此时实例完全被销毁 } } ``` 2. Composition API：这是 Vue 3 中引入的新特性，可以更灵活地组织组件逻辑。使用 Composition API，我们可以使用 `setup` 函数来定义生命周期钩子函数。 示例代码如下： ```javascript import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue' export default { setup() { onBeforeMount(() => { // 组件挂载之前被调用 }) onMounted(() => { // 组件挂载完成后被调用 }) onBeforeUpdate(() => { // 组件更新之前被调用 }) onUpdated(() => { // 组件更新完成后被调用 }) onBeforeUnmount(() => { // 实例销毁之前调用，在这一步，实例仍然完全可用 }) onUnmounted(() => { // 组件销毁后调用，此时实例完全被销毁 }) } } ``` 这是 Vue 3 中两种常用的生命周期写法。可以根据实际需求选择合适的写法。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Brrby

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值