2. 程式人生 > 其它 >元件中data為什麼是函式

元件中data為什麼是函式

阿新 • • 發佈：2021-02-04

技術標籤：筆記

data是一個函式，但是返回的是一個物件，如果data直接是一個物件，會造成聯動反應，即改變其中一個元件中的資料，其他的資料也會進行變化

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<cpn></cpn>
			<cpn>
 
</cpn>
			<cpn></cpn>
		</div>
		<template id="cpn">
			<div>
				<h2>當前計數{{count}}</h2>
			   <button @click="pre()">+</button>
			   <button @click="nex()">-</button>
			 </div>
		</template>
		<
 
script type="text/javascript" src="../js/vue.min.js"></script>
		<script type="text/javascript">
			Vue.component('cpn',{
			   template:'#cpn',
			   //這個data是一個函式，每次呼叫這個函式的時候，生成的是不同的物件
			   //可以這麼理解,下面這三個物件的記憶體地址是不一樣的，因此三個資料是互不影響的，不會產生資料聯動
			   //通俗點來說，你可以理解為三個人互不影響
 

			   // function abc(){   
			   // }
			   //var a1 = new abc();
			   //var a2 = new abc();
			   //var a3 = new abc();
			  data(){
				  return {
					  count : 0
				  }
			  },
			  methods:{
				  pre(){
					 count =  this.count++
				  },
				  nex(){
					 count =  this.count--
				  }
			  }
			})
			var app = new Vue({
				el:'#app'
			})
		</script>
	</body>
</html>

在這裡插入圖片描述
聯動反應的結果（牽一髮動全身）
在這裡插入圖片描述

相關推薦

19.vue元件中data為什麼必須是一個函式

https://www.jb51.net/article/188491.htm 前言 我們需要先複習下原型鏈的知識，其實這個問題取決於 js ，而並非是 vue 。

詳解Vue的元件中data選項為什麼必須是函式

官方解釋 data 必須是函式 構造 Vue 例項時傳入的各種選項大多數都可以在元件裡使用。只有一個例外：data 必須是函式。實際上，如果你這麼做：

vue 中watch函式名_Vue知識點：4.10終於知道元件中 data 為什麼必須是函數了

技術標籤：vue 中watch函式名 一切皆資料！ 問題：Vue 元件中 data 為什麼必須是函式？

元件中data為什麼是函式

技術標籤：筆記 data是一個函式，但是返回的是一個物件，如果data直接是一個物件，會造成聯動反應，即改變其中一個元件中的資料，其他的資料也會進行變化

vue元件中節流函式的失效的原因和解決方法

今天使用節流函式的時候遇見了一個問題，搞了半天才找到原因，所以在這裡做個總結。

Vue元件通訊-在父元件中觸發子元件中的函式 在子元件中將函式執行結果返回給父元件

技術標籤：Vuevue 在父元件中觸發子元件中的函式，子元件將函式執行的結果返回給父元件

vue中元件的data為什麼是一個函式

提出問題：元件的data資料為什麼必須要以函式返回的形式，為什麼不是簡單的物件形式呢？

vue元件中的data為什麼是函式

技術標籤：Vuevue 元件的本質可以說是一個可複用的vue例項，所以一個元件建立後就可以在各個地方多次複用，但元件中的data資料應該是互不影響的。

Vue元件為什麼data必須是一個函式

前言 我們需要先複習下原型鏈的知識，其實這個問題取決於 js ，而並非是 vue 。

vue中data為什麼是函式而不是物件

vue元件是可複用的vue例項，一個元件被建立好之後，就可能被用在各個地方，而元件不管被複用了多少次，元件中的data資料都應該是相互隔離，互不影響的.

React元件中的事件處理函式

constructor函式中bind class ReactEvent extends Component { constructor(props) { super(props); this.handleClick = this.handleClick.bind(this);

Vue靈魂 - 元件中的data與元件的模板寫法

技術標籤：Vue前端開發ECMAScript 元件中的Data new Vue({ el:\'[element]\', data:{ name:\'張三\',

30-vue元件的data為什麼是函式

技術標籤：vuevue 想要理解vue元件的data為什麼是函式時，我們先了解下js的物件

vue元件的data為什麼是一個函式（程式碼演示和講解）

技術標籤：vuevuejavascript前端 問題描述 通過 new Vue 建立的根 Vue 例項中的 data 是一個物件，用來儲存資料，那麼元件有沒有 data 呢？元件不能直接訪問Vue例項中的data，所以元件應該有自己儲存資料的地方元

20vue學習_元件裡的資料，以data函式的形式

技術標籤：VUE 1、元件裡的資料以DATA函式的形式 <!DOCTYPE html> <html lang="en">

函式元件中react-redux基本使用

安裝：yarn add redux react-redux 1、定義store檔案 store.js import { createStore } from \'redux\';

19_非但檔名元件中VueComponent建構函式&重要的內建關係

總結： 關於VueComponent: 1.school元件本質上是一個名為VueComponent的建構函式，且不是程式設計師定義的，是Vue.extend生成的。

react 【context在函式元件和class元件中的使用】

前言 　　在一個典型的 React 應用中，資料是通過 props 屬性自上而下（由父及子）進行傳遞的，但這種做法對於某些型別的屬性而言是極其繁瑣的（例如：地區偏好，UI 主題），這些屬性是應用程式中許多元件都需要的。

全域性狀態管理：如何再函式元件中使用Redux?

一、redux 　　Redux 作為一款狀態管理框架啊，是公認的 React 開發中最大的一個門檻，但同時呢，它也是 React 開發人員必須掌握的一項技能。因為只有熟練應用 Redux，你才能更加靈活地使用 React，來從容應對大型專

vue3-元件中使用setup函式獲取vuex中的資料的新方式

傳統方式 setup() { const store = useStore() //傳統方式 const aName = computed(() => store.state.name)