vue 3.0 pre-alpha

2019/11/08 vue 3.0

vue 3.0

一个月前尤大大公布了 vue 3.0 的源码,目前还是 pre-alpha 状态,预计年后会发布正式版本。听到这个消息的第一反应是学习好累呀,在知乎上瞄了一眼尤大大对功能简单的介绍,感觉难,直接放弃了学习。 冷静了一段时间之后,认真的看了看,好像也不是很难。慢慢学,慢慢看,不着急。慢一点或许到达的更好一点

vue 2.0 和 vue 3.0

最初接触 vue 2.0 是18年年初,那时候在做毕业设计,三大框架选了用 vue,如今两年过去了迎来了 3.0 的版本。对比另外的两个框架,发现 vue 更新已经很慢了,两年才发一个大版本。

在 3.0 听到了一些概念,组件 API, Proxy ,Reflect,Hooks,我是被这个概念吓到了,没听过的东西太多慌了,然后就一直一直没有去学习。回味一下自己的生活和工作又何尝不是呢? 遇事第一反应就是想逃避,既然都逃不掉,那就静下来慢慢思考,慢一点,别着急。着急解决不了任何问题,有时候会得不偿失

vue 3.0 视频介绍

什么是 Hooks ?

搜罗了网上关于 3.0 的介绍,学习了,我想起了 react ,那个里面有好多关于 Hooks 是什么,去我在 react 中寻找答案。

Function Component 就是以 Function 的形式创建的 React 组件

Hooks 是辅助 Function Component 的工具

React Hooks 的设计目的,就是加强版函数组件,完全不使用”类”,就能写出一个全功能的组件。因为组件的最佳写法应该是函数,而不是类。

React Hooks 的意思是,组件尽量写成纯函数,如果需要外部功能和副作用,就用钩子把外部代码”钩”进来。 React Hooks 就是那些钩子。

简单粗暴理解一句话说 Hooks 就是函数,需要外部提供一些方法或者属性,就通过 es6import 进行引入。

像我一个粗熟的人,就直接理解成 vue 就是一个 js 文件,需要什么,就引入什么,不引入就没有对应的方法。默认不支持引入所有,因为引入不使用,是一种资源浪费

参考

Hook 简介

React Hooks 入门教程

[实战] 为了学好 React Hooks, 我抄了 Vue Composition API, 真香

组件 API

说完了 Hooks ,组件 API 的概念也出来了。因为 vue 全局使用了一个 setup 作为入口,我们需要什么方法属性,就从 vue 中引入,而不是默认引用所有的。多个方法进行组合使用,最终只导出一个方法。

联想我们经常和接口对接 api ,差不多就是一样的

组件 API:一个组件就是一个 API

Vue 3 中令人兴奋的新功能

ReflectProxy

Reflect 就是升级版的对象,拥有很多对象的方法,但是他并不是一个函数对象,也不可构造。

let obj = {
  assign:"sunseeker"
 }
// 对象删除属性
delete obj.assign
// Reflect 删除属性
Reflect.deleteProperty(obj, assign)


// 对象是否包含某属性
'assign' in Object // true
// Reflect 是否包含某属性
Reflect.has(Object, 'assign') // true

或许是心理作用,总觉得 Reflect 操作要安心一些,像极了函数。对象的直接操作像极了命令式

还有其他的

Reflect.get()
Reflect.set()
Reflect.has()
Reflect.deleteProperty()

相当于原来对象的方法的 get set in delect 方法,相对比之前更加像函数,灵活性也得到了扩充。使用起来也更加方便了。

使用场景:vue 3.0

vue 3.0Proxy 结合 Reflect 做到响应性监听,解决了以前没有在 data 监听的对象不能响应式,某些情况下不能监听数组变化等等。都是 es6 的属性

// 使用 Reflect
let data = [1,2,3]
let p = new Proxy(data, {
  get(target, key, receiver) {
    console.log('get value:', key)
    return Reflect.get(target, key, receiver)
  },
  set(target, key, value, receiver) {
    console.log('set value:', key, value)
    return Reflect.set(target, key, value, receiver)
  }
})

p.push(1)

// 不使用 Reflect,必须在 set 的时候有return ,否则会报错
let data = [1,2,3]
let p = new Proxy(data, {
  get(target, key, receiver) {
    console.log('get value:', key)
    return target[key]
  },
  set(target, key, value, receiver) {
    console.log('set value:', key, value)
    return target[key] = value
  }
})

p.push(1)

MDN文档

ECMAScript 6 入门

Vue3 中的数据侦测

vue 3.0 简单语法介绍

reactive(): 转换响应式对象

ref(): 转换原始类型为响应式对象

ref(x) 创建响应性引用 .value

两者的区别

reactive 代理初始化一个对象,ref 只是一个 .value 值,在函数中使用都要一直使用 .value 引着

<template>
  <button @click="increment">
    Count is: , double is: 
  </button>
</template>

<script>
import { reactive, computed } from 'vue'

export default {
  setup() {
    const state = reactive({
      count: 0,
      double: computed(() => state.count * 2)
    })

    function increment() {
      state.count++
    }

    return {
      state,
      increment
    }
  }
}
</script>

reactive 类似于原来的 data,比原来还多一个可以使用 computed 属性

import { ref, watch } from 'vue'

const count = ref(0)

function increment() {
  count.value++
}

const renderContext = {
  count,
  increment
}

watch(() => {
  renderTemplate(
    `<button @click="increment">8</button>`,
    renderContext
  )
})

和前面的对比发现 reactiveref 的不同点在于,引用的是对象还是一个单个的值,如果是单个的值,在方法的使用的时候要带上 .value ,渲染到 html 上面就不需要了,vue 做了一层处理。

自己写了一个简单例子供参考学习

demo 地址

参考

Composition API RFC

精读《Vue3.0 Function API》

Vue3 对 Web 应用性能的改进

vue 3.0 语法持续更新

原文链接


一名伪程序猿——sunseekers,曾被bug虐的体无完肤,却依旧待他如初恋。

如果我改过的某一个bug,吐槽过的某一个需求,写过的某一行代码

曾在你的心里荡起涟漪,那至少说明在逝去的岁月里,我们在某一刻,共同经历着一样的情愫。

有时候,虽然素未谋面。却已相识很久,很微妙也很知足。


如果你喜欢我写过的某一个文字,请支持我,鼓励我,你的鼓励是我最大的动力来源

当然恰好你也喜欢我的话,我们可以互相关注,相互学习的哟!

sunseekers

Search

    Table of Contents