vue3.0 简介

vue3.0 简介：
  2020年9月18号, vue.js 发布3.0 版本， 代号: one piece(海贼王)
  耗时2年多, 2600多次提交， 30+个RFC(请求修改意见稿)  600+次PR   99位贡献者;

vue3.0 带来什么?
  1: 性能的提升
     打包体积减少41%,
     初次渲染快55%，更新渲染快133%
     内存减少54%....

  2：源码升级
     适用proxy 代替object.defineProperty() 实现响应式。
     重写虚拟DOM的实现和Tree-shaking(术语表===> 去掉无关紧要的代码)

  3: 拥抱TypeScript (拥抱TypeScript)
     vue3.0 支持更好的TypeScript 语法...

  4： vue3.0 新的特性:
    1: Composition API(组合API)
     2: setup 配置
     3: ref 和reactive 
     4：watch 和 watchEffect
     5: 依赖与注入 provide与inject

   新的内置组件:
   1: Fragmant：(文档碎片)
   2：Teleport 
   3: Suspense
  其他改变:
   新的生命周期钩子
   data 选项始终被声明成一个函数
   移除keyCode 支持作为v-on 修饰符


创建vue.3.0 工程: 
  第一种方法: 适用vue-cli 适用脚手架   初始化vue3.0 工程
  vue--version  // 查看vue-cli 版本
  npm install -g @vue/cli
  安装或者升级你的@vue/cli

  创建项目:
  vue create vue_test
  ## 启动
  cd vue_test
  npm run serve 运行服务
 
 适用vite 创建vue 项目:
 什么是vite？ 新一代前端构建工具.
   优势如下:
   1： 开发环境中, 无需打包操作, 可以快速冷启动。
   2:  轻量快速的热重载(HMR).
   3:  真正的按需编译, 不在等整个应用编译完成。
  
  现在前端构建工具webpack 构建工具,  vite 是尤雨溪团队打造,要挑战一下webpack 前端构建工具。
  在webpack 构建工具之前还有 grunt gulp webpack 的等前端构建工具。
  vite 中文网:  下一代前端开发与构建工具。 vite 由尤雨溪团队开发打造。 挑战一下webpack前端构建工具。
 适用vite 创建vite 的步骤:
 1: npm init vite-app <project-name> (创建工程名称)
 2: 进入 工程目录
    cd <project-name>
 3: 安装依赖
 npm install
 4: 运行
 npm run dev
 使用vite 运行项目速度极快, 吊打webpack 

在main.js 文件中:
  // 引入的不再是Vue 构造函数, 引入的是一个名为createApp 的工厂函数
  import { createApp } from 'vue';
  import App from './APP.vue'
  createApp(App).mount('#app')
  // 创建应用实例对象--> app 类似于vue2.0 vm  但是app比vm 更"轻"
  const app = createApp(App)
  console.log(app);
  // createApp(App).mount('#app')
  app.mount('#app')

  // new Vue({
  //   render: h=>(App)
  // }).$mount('#app')

  创建应用实例对象 --> app 类似与vue2.0 中的vm 但是app比vm 更"轻"
  打印出来的app 是一个对象, 对象身上的属性更少。

  初始setup 函数
  常用Composition API 
  拉开序幕的setup  理解: Vue3.0 中一个新的配置项, 值为一个函数。
  2: setup 是所有的Composition API 组合 (组合API); "表演的舞台
"
  3: 组件中所用到的数据, 方法等等, j均要配置早setup 函数中。
  4: setup 函数两种返回值: 
     1: 若是返回一个对象, 则对象中的属性, 方法， 在模板中均可以直接使用。
     (就是setup函数必须有返回值, 在setup函数中, 必须要return 出去一个对象, 对象中数据, 属性， 方法, 都可以直接使用)

     2: 若是返回一个渲染函数, 则可以定义渲染函数的内容。 h 函数就是渲染函数, 
     h 函数就是createElement 的缩写, 渲染函数....

   5: vue 3.0 中提出来一个新的配置项, 就是setup函数,  
      在vue3.0 中把定义数据, 事件处理函数, 计算属性都写到computer 中: 

   6:  vue2.0 的配置和vue 3.0配置不要混用, 
       注意点: 
       Vue2.0 配置(data, methods, computed 计算属性) 可以访问到setup 中属性, 方法。
       但是在setup 不能访问到Vue2.0 中配置 (data, methods, computed 计算属性...)
       如果有重名, setup 函数优先
  
   7: 使用ref 加工完成以后的数据, 是一个具有响应式对象。
      refImpl 引用实现: 既是两个单词的缩写; reference：引用  implement: 实现
      refimpl 引用实现的对象:  引用对象: 
      import { ref } from 'vue'
      setup() {
        // 数据
        let name = ref("张三");
        let age = ref(18);  // 是数据变成响应式的

        // 方法
        function changeInfo() {
          name.value = '李四';   // 修改数据的时候. 必须.value
          age.value = 48;   // 修改数据的时候. 必须.value
        }

        return {
          name,
          age,
          changeInfo,  // 修改数据
        }
      }
      在模板中自动 .value值, 模板自动解析了。

    8: 对象类型的数据:  使用proxy 进行数据代理: 
       ref 函数做响应式函数, 只是可以对基本数据类型进行响应, 使用底层还是object.defineProperty() 方法 进行数据劫持, 
       ref 函数处理基本的数据类型, 的确用的是get() 和 set() 方法,  但是ref 函数处理引用数据类型 就是使用了ES6 中proxy 数据代理。

     9: ref函数:
     作用: 定义一个响应式的数据
      语法: const xxx = ref('initValue');
      创建一个包含响应式数据的引用对象, (reference: 引用数据对象)
      js中操作数据: xxx.value
      模板中读取数据: 不需要.value  模板会直接解析操作
     备注： 
       接受的数据类型: 基本数据, 也可以是对象类型。
       基本数据类型: 响应式依然是靠； Object.definedProperty() 方法与get() 和set() 方法完成。
       对象数据类型: 内部"求助"了vue3.0 中一个新的函数 --- reactive 函数。


     10: reactive: 处理对象那个类型的数据是一个深层次的数据,  对象类型的数据多层次都可以检测到。  reactive 也可以处理数组类型的数据,  直接通过修改索引进行修改: 
     reactive 处理不了基本数据类型:  直接报警告数据. 
     但是通过reactive 绑定的而数据具有响应式数据

     reactive: 函数
     (1): 作用: 定义一个对象池类型的响应式数据 (基本数据类型不要用它, 基本数据类型要ref 函数)
     (2): 语法: const 代理对象 = reactive(对象) 接受一个对象(或者数据), 返回一个代理对象(Proxy) 
     (3)： reactive 定义响应式数据是 "深层次的"
     (4):  内部基于ES6的Proxy 实现的, 通过代理对象操作源数据进行操作。