分解Vue

1. 实体物件

利用createApp({...})建立一个物件实体，也就是vue的本体。

2. option

实体物件的核心，用来定义状态和事件还有之後要学的呼叫函式(例如methods)。

3. 挂载至DOM

有了实体之後就要去找到要控制的对象，使用mount()挂载节点。

目标节点可以是class name 或 tagName，没有规定只能用id。所以若有多个符合条件的元素，他只会选出第一个来挂载

资料怎麽传到画面上

在Vue实体中用data()定义message的内容，网页会将HTML模板内容进行解析，然後输出结果，如下图。

除了渲染data资料外，也可以做一些简单的运算

<div id="app">
        <h1>{{name}} bought {{quantity}} ice cream, they cost NT.{{quantity*price}}</h1>
    </div>
<script src="https://unpkg.com/vue@next"></script>

<!-- Vue bought 2 ice cream, they cost NT.50 -->

const vm = Vue.createApp({
  data() {
      return {
          name: 'Vue',
          quantity: '2',
          price: '25'
      }
  }
})
vm.mount('#app');

响应式更新

当实体被建立後，可以透过vm.$data.XXX来操作内部状态。

出现错误 : 在createApp时并未将此实体挂载到DOM上，此时的vm.$data是没有被定义的

const vm = Vue.createApp({
    data() {
        return {
            name: 'Vue',
        }
    }
})
vm.mount('#app');
vm.$data.name = "Bob"
//Uncaught TypeError: Cannot set property 'name' of undefined

所以要在vm.mount('#app')执行後vm.$data才会出现。

const vm = Vue.createApp({
    data() {
        return {
            name: 'Vue',
        }
    }
})
const vMountedInstance = vm.mount('#app');
vMountedInstance.$data.name = "Bob"

被污染的data

若页面存在个多个Vue实体，且有共同的data属性，可以在最外层帮他定义。

const dataObj = {
    message: 'Vue'
}

const vm1 = Vue.createApp({
    data() {
        return dataObj
    }
}).mount('#app1');

const vm2 = Vue.createApp({
    data() {
        return dataObj
    }
}).mount('#app2');

加入刚刚上一个段落的$data概念，想改变单一个实体时，加入以下内容，却发现vm2的内容也被修改了!!!!

vm1.$data.message = 'Hello';

解决办法 : ES6的物件解构，也就是将两个物件从参考关系变成两个互不影响的物件

const dataObj = {
    message: 'Vue'
}

const vm1 = Vue.createApp({
    data() {
        return {...dataObj}
    }
}).mount('#app1');

const vm2 = Vue.createApp({
    data() {
        return {...dataObj}
    }
}).mount('#app2');

模板template

options中放入template，效果就根HTML模板一样，

const vm = Vue.createApp({
    template: `<h1>{{name}}</h1>`,
    data() {
        return {
            name: 'Vue',
        }
    }
}).mount('#app')

书中也提到过去的Vue 2.X有个特性，就是template中只能有一个根元素且必须要有一个根元素，因为同时有多个根元素就像是多个id ='#app'一样，vue就会不知道要DOM是谁，固有此限制。

但在Vue 3.0中增加了fragments功能，也就是把多个根元素包在一个根元素里面，看起来就符合只能有一个根元素且必须要有一个根元素。

参考资料

为什麽只能有一个根元素
https://juejin.cn/post/6844904074438000648
https://segmentfault.com/a/1190000019827095
Fragments
https://www.jianshu.com/p/977de733cadf
https://juejin.cn/post/6967259191299801124