Vue3.0 beta版学习笔记

Performance

• 重写了虚拟Dom的实现（跳过静态节点，只处理动态节点）
• update性能提高1.3~2倍
• SSR速度提高了2~3倍

Tree shaking

• 可以将无用模块“剪辑”，仅打包需要的

Fragment

• 不再限于模板中的单个根节点

<Teleport>

• 以前称为<Portal> [ˈpɔːtl]，译作传送门

<Suspense>

• 可在嵌套层级中等待嵌套的异步依赖项

TypeScript

• 更好的TypeScript支持

Custom Renderer API

• 自定义渲染器API
• 用户可以尝试WebGL自定义渲染器

Composition API

• 组合式API，替换原有的 Options [ˈɒpʃnz] API
  • 根据逻辑相关性组织代码，提高可读性和可维护性
  • 更好的重用逻辑代码（避免mixins混入时命名冲突的问题）
• 但是依然可以延用 Options [ˈɒpʃnz] API

Proxy

响应式原理不再基于 Object.defineProperty

基于vue/cli配置3.0

目前vue3.0处于beta版

https://github.com/vuejs/vue-next

vue-cli-plugin-vue-next

$ npm install -g @vue/cli

$ vue --version

$ vue create xxx

$ vue add vue-next

"dependencies": { 
 "vue": "^3.0.0-beta.1" 
}, 
"devDependencies": { 
 "@vue/compiler-sfc": "^3.0.0-beta.1", 
 "eslint-plugin-vue": "^7.0.0-alpha.0", 
 "vue-cli-plugin-vue-next": "~0.1.3" 
}, 
eslintConfig": { 
 "extends": [ 
 "plugin:vue/vue3-essential" 
    ] 
}

基于vite配置vue3.0

由 vue 作者尤雨溪开发的 web 开发工具

https://github.com/vitejs/vite

• 基于浏览器原生 ES imports 的开发服务器（利用浏览器去解析 imports，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随起随用）
• 同时不仅有 Vue 文件支持，还搞定了热更新，而且热更新的速度不会随着模块增多而变慢

$ npm init vite-app xxx

$ cd xxx

$ npm install

$ npm run dev

$ npm run build

setup与响应式API

setup

setup 函数是一个新的组件选项，作为在组件内使用 Composition API 的入口点

• 初始化props和beforeCreate之间调用
• 可以接收 props 和 context
• this在setup()中不可用

props是响应式的，可以基于watchEffect/watch监听，解构赋值后则无效

export default { 
  props: { 
    title: String, 
  }, 
// 传入 {title} 则无效

  setup(props) { 
    watchEffect(() => { 
      console.log(`title is: ` + props.title); 
    }); 
  } 
};

返回的变量只直接在模板中使用

export default { 
  props: { title: String }, 
  setup() { 
 return { 
 
    }; 
  } 
};

ref

接受一个参数值并返回一个响应式且可改变的 ref 对象

• ref 对象拥有一个指向内部值的单一属性 .value
• 当ref在模板中使用的时候，它会自动解套，无需在模板内额外书写 .value

import { ref } from "vue"; 
export default { 
  setup() { 
    let supNum = ref(0), 
      oppNum = ref(0); 
    let change = lx => { 
      lx === 0 ? supNum.value++ : oppNum.value++; 
    }; 
 return { 
      supNum, 
      oppNum, 
      change 
    }; 
  } 
};

reactive

接收一个普通对象然后返回该普通对象的响应式代理 等同于 2.x 的 Vue.observable()

• 响应式转换是“深层的”：会影响对象内部所有嵌套的属性

import { ref, reactive } from "vue"; 
export default { 
  props: { title: String }, 
  setup() { 
    let state = reactive({ 
      supNum: 0, 
      oppNum: 0, 
      arr: [10, 20] 
    }); 
    let change = lx => { 
      lx === 0 ? state.supNum++ : state.oppNum++; 
 // 比Object.defineProperty好用在于：对于数据或者并未初始化的对象成员，都可以随意修改值，而且具备响应式的效果 
      state.arr[0] = state.arr[0] + 1; 
      state.name = ""; 
    }; 


 return { 
 //...toRefs(state), 
      state, 
      change 
    }; 
  } 
};

computed

传入一个 getter 函数，返回一个默认不可手动修改的 ref 对象

const count = ref(1); 
const plusOne = computed(() => count.value + 1); 
console.log(plusOne.value); //2 
plusOne.value++; //错误！

或者传入一个拥有 get 和 set 函数的对象，创建一个可手动修改的计算状态

import { ref, reactive, toRefs, computed } from "vue"; 
export default { 
  props: { title: String }, 
  setup() { 
    ...... 
 // 计算属性 
    let ratio = computed({ 
      get: () => { 
        let total = state.supNum + state.oppNum; 
 return total === 0 
          ? "--" 
          : ((state.supNum / total) * 100).toFixed(2) + "%"; 
      } 
    }); 
 return { 
      ......, 
      ratio 
    }; 
  } 
};

watchEffect

立即执行传入的一个函数，并响应式追踪其依赖，并在其依赖变更时重新运行该函数(执行实际取决于函数内涉及到的变量)

export default { 
  props: { 
    title: String, 
  }, 
  setup(props) { 
    watchEffect(() => { 
      console.log(`title is: ` + props.title); 
    }); 
  } 
};

watch

watch API 完全等效于 2.x this.$watch

• watch 需要侦听特定的数据源，并在回调函数中执行副作用
• 默认情况是懒执行的，也就是说仅在侦听的源变更时才执行回调

此外还有一些unref / toRef / toRefs / isRef / isProxy / isReactive / isReadonly 也是一些响应式api

生命周期函数

可以直接导入 onXXX 一族的函数来注册生命周期钩子

• 这些生命周期钩子注册函数只能在 setup() 期间同步使用
• 在卸载组件时，生命周期钩子内部同步创建的侦听器和计算状态也将删除

与 2.x 版本生命周期相对应的组合式 API

• beforeCreate -> 使用 setup()
• created -> 使用 setup()
• beforeMount -> onBeforeMount
• mounted -> onMounted
• beforeUpdate -> onBeforeUpdate
• updated -> onUpdated
• beforeDestroy -> onBeforeUnmount
• destroyed -> onUnmounted
• errorCaptured -> onErrorCaptured

新增的钩子函数

• onRenderTracked
• onRenderTriggered

两个钩子函数都接收一个 DebuggerEvent，与 watchEffect 参数选项中的 onTrack 和 onTrigger类似：

export default { onRenderTriggered(e)

{ debugger // 检查哪个依赖性导致组件重新渲染 },}

main.js创建入口方式的变化

import { 
    createApp 
} from 'vue'; 
import App from './App.vue'; 


createApp(App).mount('#app');

使用createApp来创建入口

以上就是目前为止vue的beta版的简单使用笔记，vue目前稳定的版本：2.6.x，后续出 2.7.x 版本（加入部分vue3内容），维护18个月之后，除安全漏洞更新之外，其余的不再继续更新~~ vue3.0在使用中兼容vue2.0的信息

api链接：https://composition-api.vuejs.org/zh/api.html

感谢周老师的资料帮助~