茶余饭后聊聊 Vue3.0 相应式数据那些事儿

发布时间：2019-10-31 12:26:10 所属栏目：建站来源：佚名

导读：别再更新了，其实是学不动了这句话道出了几多前端开拓者的心声，不幸的是 Vue 的作者在国庆区间宣布了 Vue3.0 的 pre-Aplha 版本，这意味着 Vue3.0 将近和我们晤面了。既来之则安之，扶我起来我要开始讲了。Vue3.0 为了到达更快、更

副问题[/!--empirenews.page--]

"别再更新了，其实是学不动了"这句话道出了几多前端开拓者的心声，"不幸"的是 Vue 的作者在国庆区间宣布了 Vue3.0 的 pre-Aplha 版本，这意味着 Vue3.0 将近和我们晤面了。既来之则安之，扶我起来我要开始讲了。Vue3.0 为了到达更快、更小、更易于维护、更贴近原生、对开拓者更友爱的目标，在许多方面举办了重构：

行使 Typescript
放弃 class 回收 function-based API
重构 complier
重构 virtual DOM
新的相应式机制

本日咱就聊聊重构后的相应式数据。

尝鲜

重构后的 Vue3.0 和之前在写法上有很大的不同，早前在收集上对付 Vue3.0 这种激进式的重构方法提倡了一场接头，见仁见智。不多说先看看 Vue3.0 在写法上激进到什么水平。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8"> 
  <title>Document</title> 
  <script src="../packages/vue/dist/vue.global.js"></script> 
</head> 
<body> 
  <div id="app"></div> 
  <script> 
    const { reactive, computed, effect, createApp } = Vue 
    const App = { 
      template: ` 
        <div id="box"> 
            <button @click="add">{{ state.count }}</button> 
        </div>  
      `, 
      setup() { 
        const state = reactive({ 
          count: 0 
        }) 
        function add() { 
          state.count++ 
        } 
        effect(() => { 
          console.log('count改变', state.count); 
        }) 
        return { 
          state, 
          add 
        } 
      } 
    } 
    createApp().mount(App, '#app') 
  </script> 
</body> 
</html>

确实写法上和 Vue2.x 不同有点大，还整出了个 setup。不外我的第一感受倒不是写法上的差别，事实写过 React，这种写法也没啥出格的。要害是这种相应式数据的写法仿佛在那边见过有没有?写过 React 项目标人也许一眼就能看出来，没错就是它 mobx ，一种 React 的相应式状态打点插件

import {observable,computed,autorun} from "mobx" 
var numbers = observable([1,2,3]); 
var sum = computed(() => numbers.reduce((a, b) => a + b, 0)); 
 
var disposer = autorun(() => console.log(sum.get())); 
// 输出 '6' 
numbers.push(4); 
// 输出 '10' 
numbers.push(5);

再看看 Vue3.0 袒露的这几个和相应式数据相干的要领：

reactive(value)

建设可调查的变量，参数可所以 JS 原始范例、引用、纯工具、类实例、数组、荟萃(Map|Set)。

effect(fn)

effect 意思是副浸染，此要领默认会先执行一次。假如 fn 中有依靠的可调查属性变革时，会再次触发此回调函数

computed(()=>expression)

建设一个计较值， computed 实现也是基于 effect 来实现的，特点是 computed 中的函数不会当即执行，多次取值是有缓存机制的， expression 不该该有任何副浸染，而仅仅是返回一个值。当这个 expression 依靠的可调查属性变革时，这个表达式会从头计较。

和 mobx 有异曲同工之妙。

Vue3.0 把建设相应式工具从组件实例初始化中抽离了出来，通过袒露 API 的方法将相应式工具建设的权力交给开拓者，开拓者可以自由的抉择何时何地建设相应式工具，就冲这点 Vue3.0 我先粉了。

重构后的相应式机制带来了哪些改变?

每一个大版本的宣布都意味着新成果、新特征的呈现，那么重构后的相应式数据部门对比 3.0 之前的版本有了哪些方面的改变呢?下面听我娓娓道来：

对数组的全面监听

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

1/7

尾页

6个值得珍藏的搜索引擎	网站优化核心减少SEO污
网站seo优化三个基础知	什么时候宣布文章收录