Vue3中的入口文件、setup（）、ref（）、reactive（）

Vue3中的入口文件、setup（）、ref（）、reactive（）

• main.js 文件

  //这里呢，与 vue2 有区别，引入的不再是 Vue 构造函数，而是一个 createApp 工厂函数。这个工厂函数的返回值类似于 vm，
  //我们暂且就将这个返回值称为“app”吧，这个 “app” 比 vm 更加轻量，没有那么多属性和方法
  // 工厂函数的特点：直接调用，不用 new 关键字
  import { createApp } from 'vue'
  import App from './App.vue'
  
  const app = createApp(App)
  app.mount('#app')  //挂载
  

• App.vue

  这样写没有响应式，也不能在开发者工具中修改

  setup(){
    let name = 'jack'
    function sayHello() {
      alert(`hello ${name}!`);
    }
    return {  //只有返回了才能用这个变量
      name,
      sayHello
    }
  }
  

Vue2 中的 data、methods 可以在 Vue3 中使用，在 Vue2 的方法中，可以拿到 Vue3 中的数据；在 Vue3 中的方法中，不能拿到 Vue2 中的数据。其实不建议这样互相拿，如有重复，最终以 Vue3优先

实现响应式（响应式就是 getter/setter，数据劫持是响应式的根基）（响应式就是说，我修改了xx属性，那么你会在控制台输出那句话，就意味着它捕获到了你的改变）

setup(){
    let name = ref('jack')  //将 'jack' 加工一下，变成了一个对象。是 RefImpl 的实例对象（Reference Implement）。
    function sayHello() {
      alert(`hello ${name.value}!`);  //这里要拿到对象的 value 属性
    }
    return {
      name,
      sayHello
    }
  }

但是对于对象类型的话，在 ref 中，只要不修改地址，就不会认为其改变了
注意：这里虽然没有变，但是它底层走的还是 reactive 的逻辑

let info = ref({
  name: 'jack',
  age: 18
})

解决上述问题要用 reactive（），但是它里面只能传引用数据类型，不能传基本数据类型。它很牛，无论多少层监测到，它是一个深层次的；并且对于数组、对象不再局限于那几个方法，因为它用的是 Proxy。

在 Vue3 中，处理基本数据类型，用的是 Object.definePrototery()；处理复杂数据类型，用的是 Proxy()

setup() 是在 beforeCreate() 之前执行
模板当中是一定不用 .value 的，只有 js 中的 ref 定义的属性需要