vue3.0 - 手写Vue3响应式原理 - 《前端学习总结》

一、搭建rollup开发环境

一、搭建rollup开发环境

安装环境

npm install rollup rollup-plugin-typescript2 @rollup/plugin-node-resolve @rollup/plugin-replace rollup-plugin-serve typescript -D

生成ts配置文件
```
npx tsc --init
```

包名	功能
rollup	打包工具
roll-plugin-typescript2	解析ts插件
@rollup/plugin-node-resolve	解析第三方模块
@rollup/plugin-replace	替换插件
rollup-plugin-serve	启动本地服务插件

二、开发

1、rollup.config.js


import ts from 'rollup-plugin-typescript2'
import { nodeResolve } from "@rollup/plugin-node-resolve"
import replace from '@rollup/plugin-replace'
import serve from 'rollup-plugin-serve'
import path from 'path'
export default{
  input:"src/index.ts",
  output:{
    name:'VueReactivity',
    format:'umd',
    file: path.resolve('dist/vue.js'), // 输出的文件路径
    sourcemap:true // 生成映射文件
  },
  plugins:[
    nodeResolve({
      extensions:['.js','.ts']
    }),
    ts({
      tsconfig:path.resolve(__dirname,'tsconfig.json')
    }),
    replace({
      'process.env.NODE_ENV':JSON.stringify('development')
    }),
    serve({
      open:true,
      openPage:'/public/index.html',
      port:3000,
      contentBase:''
    })
  ]
}

2、实现@vue/reactivity 的功能

安装

npm install @vue/reactivitu

使用

<script src="/node_modules/@vue/reactivity/dist/reactivity.global.js"></script>
<!-- <script src="/dist/vue.js"></script> -->

src/public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">app</div>
    <script src="/node_modules/@vue/reactivity/dist/reactivity.global.js"></script>
    <!-- <script src="/dist/vue.js"></script> -->
    <script>
      // console.log(window, 'window');
      const { reactive, effect } = VueReactivity;
      const state = reactive({ name: 'liming', age: 20 });
      effect(() => {
        document.getElementById('app').innerHTML =
          state.name + '现在年龄' + state.age;
      });
      setTimeout(() => {
        state.name = '小明';
      }, 1000);
    </script>
  </body>
</html>