Vueのdataがなぜ関数として返されるのか
16257 ワード
dataはなぜ関数として返されるのか
Vue単純インスタンス
1つの
アセンブリインスタンス
したがって、このような現象を回避するために、
毎日1題
リファレンス
Vueを使用してコンポーネント化アプリケーションを構築する場合、各コンポーネントのdata属性は、主にコンポーネント化が実装されると、各インスタンスは、同じオブジェクトの参照を共有するのではなく、返されるオブジェクトの独立したコピーを維持することができる.Vue単純インスタンス
1つの
Vueの単純なインスタンス、すなわち、コンポーネント化実装を使用しない場合、dataは、1つのインスタンスのみであるため、複数のインスタンスが共有されるという問題が存在しないオブジェクトであってもよい.
<html>
<head>
<title>Vuetitle>
head>
<body>
<div id="app">
<div>{{msg}}div>
div>
body>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js">script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
msg: 'Vue Instance'
}
})
script>
html>
アセンブリインスタンス
Vueのコンポーネント化インスタンスを使用する場合、dataのプロパティは関数として返さなければなりません.関数として返さないと、次の例ではボタンコンポーネントが多重化されており、最初のボタンをクリックするとき自体が最初のボタン+1しかないはずです.しかし、すべてのボタンは+1に従っています.ここでは、コンポーネント化されたインプリメンテーションで関数を使用しない形式でVueを返すと、直接エラーが発生しますが、インプリメンテーションの効果は同じです.関数として返されますが、返されるオブジェクトのcountの属性は、counterオブジェクトに対する参照を指します.本質的には、複数のコンポーネントインスタンスが1つのオブジェクトを共有しており、実際の効果はオブジェクトとして直接返されるのと同じです.
<html>
<head>
<title>Vuetitle>
head>
<body>
<div id="app">
<button-counter>button-counter>
<button-counter>button-counter>
<button-counter>button-counter>
div>
body>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js">script>
<script type="text/javascript">
var counter = {
count: 0
}
Vue.component('button-counter', {
data: function(){
return counter;
},
template: ''
})
var vm = new Vue({
el: '#app'
})
script>
html>
したがって、このような現象を回避するために、
data属性は、同じオブジェクトの参照を共有するのではなく、各インスタンスが返されるオブジェクトの独立したコピーを維持できるように、関数として返さなければならない.
<html>
<head>
<title>Vuetitle>
head>
<body>
<div id="app">
<button-counter>button-counter>
<button-counter>button-counter>
<button-counter>button-counter>
div>
body>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js">script>
<script type="text/javascript">
Vue.component('button-counter', {
data: function(){
return {
count: 0
}
},
template: ''
})
var vm = new Vue({
el: '#app'
})
script>
html>
毎日1題
https://github.com/WindrunnerMax/EveryDay
リファレンス
https://segmentfault.com/a/1190000019318483
https://cn.vuejs.org/v2/guide/components.html
https://blog.csdn.net/fengjingyu168/article/details/72900624