vue 3.0 pre-alpha

sunseekers

发布于 2019-11-13 14:27:35

81500

代码可运行

文章被收录于专栏：我和我大前端的故事我和我大前端的故事

运行总次数：0

代码可运行

vue 3.0

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

vue 2.0 和 vue 3.0

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

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

vue 3.0 视频介绍

什么是 Hooks ？

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

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

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

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

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

参考

Hook 简介

React Hooks 入门教程

组件 `API`

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

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

组件 API：一个组件就是一个 API

Vue 3 中令人兴奋的新功能

`Reflect` 和 `Proxy`

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.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 中的数据侦测

vue 3.0 简单语法介绍

reactive(): 转换响应式对象

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

两者的区别

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

<template>
  <button @click="increment">
    Count is: {{ state.count }}, double is: {{ state.double }}
  </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">{{ count }}</button>`,
    renderContext
  )
})
复制代码

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