安装脚手架

 

 

 

 

 

 

 

 

绑定原理

vue2 绑定原理：访问器属性 + 虚拟DOM树

但是访问器属性只能在首次创建new vue()对象时初始就有的属性，添加监视（访问器属性）。1.今后动态添加进来的成员，就无法自动添加访问器属性，也就无法自动得到监视；2.无法给索引数组的数字下标添加访问器属性；结果在vue 程序中后添加成员，或通过下标修改索引数组中的元素值，页面都不自动更新。

 

 

 vue3 中的绑定原理（解决2中的以上两点缺点）：

ES6 的Proxy 代理对象，proxy在目标对象的外城搭建了一层拦截，外界对目标对象的所有操作，都必须通过这层拦截。

proxy优点 == 对象内部所有现有属性自动被监视，而且后添加的属性，一进入对象就被监视。缺点 == 兼容性问题

数组：

 

 

 对象：

 

 

 vue2 对比vue3 变化：ES6的proxy 代替了访问器属性

 

脚手架的变化

main.ts 中的变化：

// 1.替代了new Vue() ,因为 vue3 更倾向于函数式编程，而不是面向对象式编程

import {createApp} from 'vue' // 用于创建vue Vue对象
import App from './App.vue'  // 相当于旧的脚手架中的容器
import router from './router'  
import store from './store'  
import axios from 'axios';  // vue3中可以不用非要放到vue原型中，靠模块化开发的引入也可使用
axios.defaults.baseURL = '/'

createApp(App).use(store).use(router).mount('#app')  

 

页面组件内的变化

<template>和<style>没有任何变化，和vue2中一样使用

 

 <script>中vue3 也支持vue2 写法，但会逐渐不支持。<script>中新写法：

1. 引入 vue 模块中提供的函数，用于创建组件对象和加工组件对象的内容

    import { defineComponent,ref } from 'vue'

defineComponent 是vue3 提供的专门创建组件对象的函数

ref 是vue3 提供的一个函数，专门将任何东西包装成为一个能被监视的proxy 对象

2. 用defineComponent()函数创建一个数组对象，依然可以用components 成员引入其他子组件（与vue2 相同）

export default defineComponent({
  name:'Home',
  components:{
    子组件对象，....
  }
})

3. defineComponent({}) 函数内，必须先调用setup() 函数作为整个数组代码的运行起点

setup() 其实是代替了vue2 中的create 声明周期，即在vue3中的声明起点是setup

 

4. ‘界面’中所需的所有变量和函数，只要直接声明在setup() 函数内即可