Python正在慢慢褪色 | 机器之心

# 关于Vue3

Vue3与10月6号左右宣布即将发布，作者也公开了底层的基于proxy语法重新构建的vue3新版本，大量使用了typescript去构建，rollup打包，风格也借鉴了react 15.8版本的hooks，相当于vue3中没有了this对象(use,mixin等基于this的API可能有改变,router和vuex也将基于inject,provid API重写--猜测)，底层响应式原理重写(delete,set等由于defineprototypeAPI的缺点产生的API也将没有)，Vue3相关的API可以看这里 Vue Composition API 目前还没出中文版本，熟悉react hooks的可直接上手。个人还是更期待react17.x后的concurrent模式带来的提升，hooks也早已是react提出已久的编程思想了。

# 核心API

# reactive

响应式核心，相关核心API依赖，使用proxy代理对象并返回proxy，相当于Vue2的definePropertyAPI，避免了数组的缺陷，可劫持数据的所有操作，具体查看相关API文档

# effect

与react的useEffect用法相识，当前先触发一次，之后对数据的更改都会执行该函数，仅对所传递的函数内有响应式的数据生效，且只有函数内的变量状态改变才触发，依赖收集很巧妙的利用JS单线程的特点，极大程度上自动优化了框架性能，使用者不必太关心性能问题。

# 运行

打包一份vue3的代码，试试效果

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./vue.global.js"></script>
    <!-- vue仓库打包的代码 -->
</head>
    <script>
        let obj1={
            name:'CJ',
            age:23
        }//原对象
        let p1=Vue.reactive(obj1);//返回代理后的proxy对象
        console.log(p1);//Proxy{name:"CJ}
        Vue.effect(()=>{//影响：当p1的name属性发生改变时触发函数执行，仅仅只有name属性更改触发
            console.log("effect1:name改变"+p1.name);
        })//立即执行一次 打印effect1:name改变CJ
        Vue.effect(()=>{//同上
            console.log("effect2:name改变"+p1.name);
        })//立即执行一次 打印effect2:name改变CJ
        Vue.effect(()=>{//影响：当p1的age属性发生改变时触发函数执行，仅仅只有age属性更改触发
            console.log("effect1:age改变"+p1.age);
        })//立即执行一次 打印effect1:age改变23
        Vue.effect(()=>{//同上
            console.log("effect2:age改变"+p1.age);
        })//立即执行一次  打印effect2:age改变23
        p1.name="CJI@";//name属性有两个effect函数，所以执行两次
        // effect1:name改变CJI@
        // effect2:name改变CJI@
        p1.name="CJI1";//同理
        // effect1:name改变CJI1
        // effect2:name改变CJI1
        p1.name="CJI2";//同理
        p1.name="CJI3";//同理
        p1.age=24;//age更改也有两个effect，也是两次。
         // 控制台结果
        // effect1:age改变24
        // effect2:age改变24
    </script>
</body>
</html>

开始感觉真的很奇怪，vue3是如何做到effect内的函数仅因为自己函数内有的变量改动才会触发执行，感觉好神奇，每次依赖收集都能收集如此颗粒化。

# 核心原理及实现

使用typescript构建，刚学，比较菜，就当原生JS看就好了

# reactive.ts

源码路径：vue-next\packages\reactivity\src\reactive.ts

将数据转换为响应式，使用proxy代理对应的target，劫持对应的get，set，weakMap做代理映射表，基于其弱引用的特性，key只能为Object类型，对象不存在时GC自动回收其value，性能优化。

let {track,trigger}=require('./track');//触发器和收集依赖
import {proxyConstructor,Handle} from './interface';//ts接口，类型约束handler和proxy




    

let toProxy=new WeakMap();//存储代理对象弱引用，key只能为非简单类型，key为空时方便GC机制回收对用的value
let toRaw=new WeakMap();//防止重复代理已经代理过的proxy对象做缓存检查
export function reactive(target:any){//就是想和源码一样的调用过程而已
    return createReactiveObj(target)
let handle:Handle={//proxy处理函数，new proxy传入处理器，建议先跳到createReactiveObj方法
    get(target,key,receiver){
        track(target,key)//effect内包裹的函数每次先执行都会获取内部被劫持变量
        //触发对应的get，执行依赖收集
        const res=Reflect.get(target,key,receiver);//Reflect能返回操作是否成功
        return res;
    set(target,key,val,receiver){
        let res:boolean;
        let oldVal=target[key];
        if(!target.hasOwnProperty(key)){//没有属性为新增
        //防止劫持对象为数组时触发两次set避免不必要的更新
        //第一次改变为设置该数组的下标，如果是删除或者新增是则会触发该数组第项的length对象的改变
            trigger(target,'add',key);//通知触发器执行对应的依赖
            res=Reflect.set(target,key,val,receiver);//使用reflect能够返回操作是否成功
            return res;
        }else if(oldVal!==val){//对象已有改属性代表修改
            res=Reflect.set(target,key,val,receiver);
            trigger(target,'update',key);//通知触发器执行对应的依赖
            return res;
        return false;
    deleteProperty(target,key){
        return Reflect.deleteProperty(target,key)
//代理监测
function createReactiveObj<T extends Object >(target:T|any):proxyConstructor{
    if(typeof target==='object'||target!=null){//type of null ===object===true
        const targetProxy=toProxy.get(target)//代理映射表弱引用，查看是否以及被代理过
        if(targetProxy){//防止代理重复的代理对象
            return targetProxy;
        if(toRaw.has(target)){//反向映射表防止传入多次代理已代理过的对象
            return target
        let observe:proxyConstructor=new Proxy(target,handle);
        toProxy.set(target,observe);//添加代理映射表
        toRaw.set(observe,target);//添加反向代理映射表
        return observe;
    }else{
        return target;

# track.ts

effect函数收集监听对象effect里target对应的函数，利用执行函数时会访问到函数内监听对象的值，触发handler的get，执行收集依赖，相同的key放入同一个set集合,改变时在set函数内触发对应key的set集合的函数依次执行

let {effectStacks}=require('./effect');//存储effect函数的栈接口数组
let targetMap=new WeakMap();
export function track(target,key){//收集依赖
    let effect=effectStacks[effectStacks.length-1];//得到effect内的函数
    if(effect){
        let depsMap=targetMap.get(target);//查看是否有该对象map
        if(!depsMap){//没有则新建对应target的map对象
            targetMap.set(target,depsMap=new Map());
        let deps=depsMap.get(key);//得到该map下的所收集的set集合的依赖
        if(!deps){//没有则新建空set
            depsMap.set(key,deps=new Set());
        if(!deps.has(effect)){//没有effect则添加
            deps.add(effect); 
}//函数执行一遍后targetMap内的结构就应该是这样的解构
//     target:{
//         key:[effect1,effect2,effect3]//,
//         key:[effect1]
//     },
//     target2:{
//         key:[effect1,effect2,effect3]//,
//         key:[effect1]
//     }
export function trigger(target,type,key){//触发依赖执行
    let depsMap=targetMap.get(target);//获取对象下的map
    if(!depsMap){
    }else{//有map的话就代表该map下有set集合的effect函数
        let deps=depsMap.get(key);//是否有该key的effect set集合
        if(deps){//有就遍历整个set对象执行对应的effect内的函数
            deps.forEach(fn => {
                fn();
            });

# effect.ts

存储effect栈数组，每次effect函数调用时都会往effect栈数组推入依赖的函数，然后执行一次effect内包裹的函数去触发proxy的get，再去触发收集依赖，以特定的格式收集存储该依赖，执行完毕后移除push的effect函数。

 let effectStacks:Array<Function>=[];
 function createReactiveEffect




    
(fn:Function):void{
    let effect =function(){
        return run(effect,fn);
     effect();
function run (effect:Function,fn:Function):void{
    try{
        effectStacks.push(effect);//effect栈推入effect函数
        fn();//首次调用，执行一次，触发get函数内的track收集依赖，此时的栈内已有effect函数。
        //track会将该函数已特定的形式存储起来
    }finally{
        effectStacks.pop();//删除push的effect，等待下次effect调用该函数，再次重新执行
 function effect (fn:Function){
    return createReactiveEffect(fn);
export {
    effectStacks,
    effect

# 效果

因为环境是ts构建，所以使用node去执行对应的代码

import {reactive} from './reactive';
import {effect } from './effect';
let obj1={name:'CJ'}
let p1=reactive(obj1);
effect(()=>{
    console.log("effect1:"+p1.name)
effect(()=>{
    console.log("effect2:"+p1.name)
p1.name="CJI@";
p1.name="CJI1";
p1.name="CJI2";
p1.name="CJI3";
//输出顺序
// effect1:CJ name effect1 首次执行
// effect2:CJ name effect2首次执行
// effect1:CJI@  name  effect1 修改触发
// effect2:CJI@  name  effect2 修改触发
// effect1:CJI1   name  effect1 修改触发
// effect2:CJI1
// effect1:CJI2
// effect2:CJI2
// effect1:CJI3
// effect2:CJI3

# 效果

使用node去执行对应的代码

import {reactive} from './reactive';
import {effect } from './effect';
let obj1={name:'CJ'}
let p1=reactive(obj1);
effect(()=>{
    console.log("effect1:"+p1.name)
effect(()=>{
    console.log("effect2:"+p1.name)
p1.name="CJI@";
p1.name="CJI1";
p1.name="CJI2";
p1.name="CJI3";
//输出顺序
// effect1:CJ name effect1 首次执行
// effect2:CJ name effect2首次执行
// effect1:CJI@  name  effect1 修改触发
// effect2:CJI@  name  effect2 修改触发
// effect1:CJI1   name  effect1 修改触发
// effect2:CJI1
// effect1:CJI2
// effect2:CJI2
// effect1:CJI3
// effect2:CJI3

# @vue/composition-api

从国庆节到现在还没听说vue3要彻底发布的消息，每天都迫不及待，终于在好奇心的驱使下去研究了一波composition-api的玩法，目前还没正式出vue3，在vue2项目中想要体验vue3的特性时需引入 @vue/composition-api

# vue/cli3中使用vue/composition-api

初始化cli3项目就不多说了，直接甩命令

npm install -g @vue/cli
yarn global add @vue/cli
vue create vue3
#创建项目
cd vue3
#进入目录
yarn install
#安装依赖
npm run serve
#开启服务

一个cli3的基础服务就跑好了，为了能使我们使用vue3的特性，接下来开始安装composition-api


yarn add @vue/composition-api

安装后我们需要在vue项目中使用，需要引入@vue/composition-api，并使用vue的use 来安装


import Vue from 'vue';
import App from './App.vue';
import VueComponistionApi from '@vue/composition-api';//引入composition-api
Vue.config.productionTip = false;
Vue.use(VueComponistionApi);//安装插件
new Vue({
  render: h => h(App),
}).$mount('#app');

接下来就能快乐的玩耍vue3的新特性了，首先来看看vue单文件结构的变化。

# 构建一个todosAPP

接下来我们来使用composition-api构建一个简单的todosAPP吧！！！

# V1

App.vue


<template>
  <div id="app">
    <input type="text" v-model="state.value">
    <button @click="addItem">点击增加</button>
      <li v-for="(item, idx) in state.todos" :key="idx">
        {{ item.name }}
        <span style="float:right" @click="finishItem(idx)"
          >是否完成：{{ item.isFinished ? "是" : "否" }}</span
  </div>
</template>
<script>
import { reactive, onMounted } from "@vue/composition-api";//引入composition-api
export default {
  setup() {//所有生命周期或者函数API等都在setUp中
    onMounted(() => {//渲染完成，对应vue2mounted
      console.log("mounted!");
    });
    const state = reactive({//将数据转换为响应式
      todos: [],
      value:''
    });
  const addItem=()=>{//添加代办项
    state.todos.push({
      isFinished:false,
      name:state.value
    });
    state.value="";
  const finishItem=(idx)=>{//完成代办
    state.todos[idx].isFinished=true;
  //return的元素可以直接在template中取到，可返回需要的函数和state对象
    return {
      state,
      addItem,
      finishItem
</script>
<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
</style>

这样一个简单的todosAPP就完成了，是不是总感觉和vue2有点相识，不是传说中vue3可以抽离逻辑代码吗，接下来我们修改一些代码，将我们的业务抽离出去

# V2


<template>
  <div id="app">
    <input type="text" v-model="state.value" />
    <button @click="addItem">点击增加</button>
      <li v-for="(item, idx) in state.todos" :key="idx">
        {{ item.name }}
        <span style="float:right" @click="finishItem(idx)"
          >是否完成：{{ item.isFinished ? "是" : "否" }}</span
  </div>
</template>
<script>
import { reactive, onMounted } from "@vue/composition-api";
const useTodos = () => {//将业务抽成函数并返回业务需要的状态和函数
  onMounted(() => {
    console.log("mounted!");
  });
  const state = reactive({
    todos: [],
    value: ""
  });
  const addItem = () => {
    state.todos.push({
      isFinished: false,
      name: state.value
    });
    state.value = "";
  const finishItem = idx => {
    state.todos[idx].isFinished = true;
  return {//返回状态
    state,
    addItem,
    finishItem
export default {
  setup(props,content) {
      console.log(props,content)
    return {//必须返回视图层需要调用到的函数或者对象
      ...useTodos(),
      // ...useOthers()
</script>
<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
</style>

# props以及content

props的接收方式变了，vue2使用props对象来定义值的类型和默认值，vue3的props传递在setup函数的第一个参数
this没了，vue2中所有关于组件的状态都挂载在this对象下，vue3中setup函数的第二个参数传递的this对象


export default {
  setup(props,content) {//props和this
      console.log(props,content)//
    return {//必须返回视图层需要调用到的函数或者对象
      ...useTodos(),
      // ...useOthers()

# 变化

个人感觉总体没什么变化，以前很多旧的概念和API都能直接使用，如果真要说变化的地方，就像是作者说的那样，底层性能和虚拟DOM的优化等，有兴趣可以网上看看，对于开发者而言，能抽离业务逻辑好处真的太多太多了，而且也更大的扩展的vue的编码方式，自由度也更大了，周末快乐，做饭去了