聊聊 Vue3.0 响应式数据那些事儿

最新推荐文章于 2024-01-15 13:13:21 发布

怎样的夜

最新推荐文章于 2024-01-15 13:13:21 发布

阅读量681

点赞数

分类专栏： web开发前端开发

本文链接：https://blog.csdn.net/mashibing_web/article/details/109748233

版权

"别再更新了，实在是学不动了"这句话道出了多少前端开发者的心声，"不幸"的是 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)

最低0.47元/天解锁文章

怎样的夜

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
聊聊 Vue3.0 响应式数据那些事儿

"别再更新了，实在是学不动了"这句话道出了多少前端开发者的心声，"不幸"的是 Vue 的作者在国庆区间发布了 Vue3.0 的 pre-Aplha 版本，这意味着 Vue3.0 快要和我们见面了。既来之则安之，扶我起来我要开始讲了。Vue3.0 为了达到更快、更小、更易于维护、更贴近原生、对开发者更友好的目的，在很多方面进行了重构：使用 Typescript 放弃 class 采用 function-based API 重构 complier 重构 virtual DOM 新的响应式机制今天咱
复制链接

扫一扫