Vue面试题--为什么data必须是函数

首先我们创建组件的时候(这里以子组件为例子),数据是需要独立的,不可能子组件只用一次吧,但是数据的改动可谓是牵一发而动全身啊!所以data必须是函数,
因为每当用一次所创建的子组件,就会调用一次data函数,从而return 一个新的对象,这些对象的地址不同,所以避免了牵一发而动全身,

这里需要了解的是,按值传递,就是说引用数据类型的数据,如果是单纯的复制一份,那么他们的指向地址是一样的,

<sctipt>
	let a = {count:0}
	let b = a
	//此时a和b恒等于
script>

接下来举个例子说明一下data为啥是函数

简单的来说,因为每调用一次子组件,就会调用一次data(){...}
这个函数这个函数内部return{...} 一个新的对象,他们的指向不同,
所以不相等,至于其他的实例比如methods啊computed啊,
人家不需要不同的,所以这就为什么data一定是函数了
<body>
  <div id="app">
    <p>===========================p>
    <Counter>Counter>
    <p>===========================p>
  div>
  
  <template id="counter">
    <button @click="sub">-button>
    {{count}}
    <button @click="plus">+button>
  template>
  <script>
    let counter = {
      data(){
        return {
          count:0,
        }
      },
      template:"#counter",
      methods:{
        plus(){
          this.count++
        },
        sub(){
          this.count--
        }
      }
    }
  script>
  
  <script>
    const app = Vue.createApp({
      components:{
        counter
      }
    }).mount('#app')
  script>
 
body>

结果是数据之间互不影响
Vue面试题--为什么data必须是函数_第1张图片

你可能感兴趣的:(笔记,vue,vue)