一、构造函数

1. Vue3不存在构造函数

   // vue2写法
   const app = new Vue(options)
   Vue.use()
   app.$mount("#app")
   
   
   // vue3写法
   import { createApp } from 'vue'
   import App from './App.vue'
   import './index.css'
   
   createApp(App).mount('#app')
   

2. Vue3 app对象打印

   

二、this

1. vue2组件内this指向的组件实例（instanc）

2. vue3组件中this指向Proxy

   

三、Composition Api

1. 对比

• vue2 option api ：组件复杂时，组件内的功能非常零散，每新增一个功能，代码都会分部到不同的配置里面（如data、computed、methods），维护阅读很苦难

• vue3 composition api： 代码还是那么多代码，但是代码是合并到一起的（高内聚），并且由于代码高内聚的，我们可以将一块代码提成一个模块

  

2. setup函数

• 函数是在所有组件属性都确定之后调用（即所有生命周期前调用）
• 函数中this为undefined
• 函数返回的对象内的所有属性都行被放到组件实例内（类似于vue2 data()）

3. ref函数

• 举例：下面代码中count值增加没有引起重新渲染，原因是数据不具有响应式，数据变化，vue感应不到，所以我们需要在数据外套一层ref

  

4. 为什么在模版中使用count的时候不是用count.value，甚至typeof count === number

• 因为vue3对ref做了特殊处理，在模版中访问count，实际是访问的代理对象，代理对象再从组件实例中获取值

  

5. 由于在setup函数内需要用value，但是在模版内又不需要value，如果都用同一个变量名，那函数内用count.value，模版内用count，容易晕，所以官方建议在变量命名时加后缀，如countRef。