Vue3.0数据响应式原理详解-创新互联

基于Vue3.0发布在GitHub上的第一版源码(2019.10.05)整理

创新互联公司主营吕梁网站建设的网络公司,主营网站建设方案,app软件开发公司,吕梁h5成都微信小程序搭建,吕梁网站营销推广欢迎吕梁等地区企业咨询

预备知识

ES6 Proxy，整个响应式系统的基础。
新的composition-API的基本使用，目前还没有中文文档，可以先通过这个仓库(composition-api-rfc)了解，里面也有对应的在线文档。

先把Vue3.0跑起来

先把vue-next仓库的代码clone下来，安装依赖然后构建一下，vue的package下的dist目录下找到构建的脚本，引入脚本即可。
下面一个简单计数器的DEMO：

<!DOCTYPE html>
<html lang="en">
<body>
 <div id='app'></div>
</body>
<script src="./dist/vue.global.js"></script>
<script>
const { createApp, reactive, computed } = Vue;

const RootComponent = {
 template: `
  <button @click="increment">
   Count is: {{ state.count }}
  </button>
 `,
 setup() {
  const state = reactive({
   count: 0,
  })

  function increment() {
   state.count++
  }

  return {
   state,
   increment
  }
 }
}

createApp().mount(RootComponent, '#app')
</script>
</html>

网页题目：Vue3.0数据响应式原理详解-创新互联
转载注明：https://www.cdcxhl.com/article12/cddgdc.html

成都网站建设公司_创新互联，为您提供云服务器、网站改版、App开发、商城网站、Google、小程序开发

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容