
图片
Vue3.0在国庆节的时候突然更新,让我们这群开发者又踏上了学习Vue的路上,更新的内容有人说好,又有人说不好,其实这并不重要,重要的是API变化太大了。
之前Vue数据响应式是使用了defineProperty的特性,我们再次回顾defineProperty进行数据劫持。
1 | function observer (target) { |
Vue把对象中的所有属性都通过defineProperty定义,而且每当对象设置值的时候会触发视图的更新,但是Vue也有不能触发视图的更新的几种情况,第一个就是不存在的属性不能触发更新,直接修改数组不能触发更新,这些就是缺点所在了。
Vue3.0为了修复这些问题,使用proxy进行数据劫持,这是ES6的语法,性能十分优异。
下面是使用Vue3.0编写组件的示例代码
1 | <body> |
vue3.0为了更好的类型推断,(避免使用装饰器),完全使用普通函数,用TS重写了源码,所以在项目中你使用Vue3.0开发,最好和TS搭配使用。
数据通信之前使用高阶组件(会导致没有更新的组件也进行重新渲染),mixin(变量名会和组件内部冲突),作用域插槽(会导致数据来源不明确),现在Vue开发了一个@vue/composition-api组合式API,让组件的复用变得更加简单。
Vue3.0中通过reactive定义响应式的数据。
1 | let proxy = Vue.reactive({ name: 'hello world' }) |
我们可以演示proxy代理对象的过程
1 | function reactive(target) { |
Vue3.0的语法目前还是预览版本,但是API已经基本确定下来了,内部源码还可能发生改动,不建议在线上环境进行使用。