初识 vue 3.0

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 的版本。更新并不快,对比另外的两个框架。

在 3.0 听到了一些概念,组件 API, Proxy ,Reflect,Hooks,听到这些概念我就延迟了 3.0 的学习,一直拖,一直到现在。

vue 3.0 视频介绍

什么是 Hooks ?

搜罗了网上关于 3.0 的介绍,学习了,我想起了 react 。关于 Hooks 是什么,我在 react 中寻找答案。

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

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

一句话说 Hooks 就是函数,通过 es6import 进行引入 vue 的模块进行书写。

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

参考

Hook 简介

React Hooks 入门教程

ReflectProxy

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

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

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

vue 3.0 Proxy 结合 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 中的数据侦测

组件 API

多个方法进行组合使用,最终只导出一个方法

Vue 3 中令人兴奋的新功能

vue 3.0 简单语法介绍

reactive 相当于原来的 Vue.observable() 的,反向代理并监听对象的变化

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 做了一层处理。

参考

Composition API RFC

精读《Vue3.0 Function API》

Vue3 对 Web 应用性能的改进


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

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

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

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


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

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

sunseekers

Search

    Table of Contents