Vue3（二、1）

1. createApp

• 相比较vue2中的new Vue ({})，vue3是通过createApp({})传递一个对象创建vue实例的

• 那么它一系列的方法也将由app这个实例来承担，如创建一个全局组件app.component()

2. mount,unmount（挂载/卸载 组件）

• app.mount('#my-app')
• app.unmount('#my-app')

• 创建一个实例挂载到#app节点上

3. setup()

• 为什么要setup：官方的描述是，为了让你能够使用composition api而创造的setup，那我们可以理解，所有从vue中引入的api都可以在setup中使用。

• 执行时机：setup被调用的时机是在beforeCreate()之前。

• setup的返回值：如果setup返回的是一个对象，它将会被合并到template的执行上下文中，也就是它将能够被template中调用这些数据。

• 用ref创建的变量（类似于react当中的hook中的useref()，里面需要传递一个初始值），在使用这个ref时，想要获取它的值，要通过使用ref.value才能获取到，但是在template中想要获取它的值的时候，直接使用就行了，因为它内部已经把它自动分离开来了。

• setup可以返回一个函数，这个函数是render function渲染函数，也就是vue2中的h()函数。

• setup()将会把接收到的props作为第一个参数传入，之前说过setup() return的对象会自动的添加到template的上下文中，而props不需要return出去，它会自动添加到template的上下文中。
• props不需要通过reactive变成响应式的一个数据，它会自动就是一个响应式的数据，打印出来它，可以发现它是一个由proxy代理过的一个对象，原本就是一个响应式的数据了。

• props的变化可以被watchEffect和watch这两个composition api监听到它的变化

watchEffect和watch的区别：

• watchEffect监听所有的变化，接收一个回调函数，在初始状态和变化状态都会执行
• watch接收两个回调函数，第一个返回要监听的数据，第二次回调是执行的回调函数，只在变化的时候执行，初始状态不执行。

• 不要把props里面的数据解构出来使用，这样会导致它丧失掉它的响应式。