精读《Vue3.0 Function API》_vue.js

来源:脚本之家  责任编辑:小易  

vue 3.0 版本确实没有正式发布,你查看的 vue 的版本是不是 vue-cli 脚手架的版本,然后 unclosed bracket 说的是你的括号不成对吧?然后这个是 js 的问题,bootstrap 是 csswww.zgxue.com防采集请勿采集本网。

1. 引言

Vue 3.0 的发布引起了轩然大波,让我们解读下它的 function api RFC 详细了解一下 Vue 团队是怎么想的吧!

ue的ui框架iview一定要配合webpack用吗?webpack iview vue.js新.新手真心吐槽一下,iview的脚手架工具用npm run init各种报错,官方也不指导一下.天津众 维原画设计提供

首先官方回答了几个最受关注的问题:

自己制作啊,合成方式如下 其他的木头也可以合成木箱子的。

Vue 3.0 是否有 break change,就像 Python 3 / Angular 2 一样?

vue create 是vue-cli3.x的初始化方式,目前模板是固定的,模板选项可自由配置,创建出来的是vue-cli3的项目,与cue-cli2项目结构不同,配置方法不同,具体配置方法参考官方文档网页链接。vue

不,100% 兼容 Vue 2.0,且暂未打算废弃任何 API(未来也不)。之前有草案试图这么做,但由于用户反馈太猛,被撤回了。

1/3×3=1/3+1/3+1/3=1 1/3=1÷3=0.3333333…3,3×0.3=0.3×3=0.3+0.3+0.3=0.9就是这个道理

Vue 3.0 的设计盖棺定论了吗?

msg3.0的是qq聊天记录文件。msg3.0是新格式。使用QQ2013SP5之前的版本,产生的消息记录只记录在msg2.0.db里。使用QQ2013SP5版本到大概QQ6.0版本,产生的消息记录同时存放在msg2.0和msg3.0两个DB

没有呀,这次精读的稿子就是 RFC(Request For Comments),翻译成中文就是 “意见征求稿”,还在征求大家意见中哦。

这 RFC 咋这么复杂?

RFC 是写给贡献者/维护者的,要考虑许多边界情况与细节,所以当然会复杂很多喽!当然 Vue 本身使用起来还是很简单的。

Vue 本身 Mutable + Template 就注定了是个用起来简单(约定 + 自然),实现起来复杂(解析 + 双绑)的框架。

这次改动很像在模仿 React,为啥不直接用 React?

首先 Template 机制还是没变,其次模仿的是 Hooks 而不是 React 全部,如果你不喜欢这个改动,那你更不会喜欢用 React。

PS: 问这个问题的人,一定没有同时理解 React 与 Vue,其实这两个框架到现在差别蛮大的,后面精读会详细说明。

下面正式进入 Vue 3.0 Function API 的介绍。

2. 概述

Vue 函数式基本 Demo:

<template> <div> <span>count is {{ count }}</span> <span>plusOne is {{ plusOne }}</span> <button @click="increment">count++</button> </div></template><script>import { value, computed, watch, onMounted } from 'vue'export default { setup() { // reactive state const count = value(0) // computed state const plusOne = computed(() => count.value + 1) // method const increment = () => { count.value++ } // watch watch(() => count.value * 2, val => { console.log(`count * 2 is ${val}`) }) // lifecycle onMounted(() => { console.log(`mounted`) }) // expose bindings on render context return { count, plusOne, increment } }}</script>

函数式风格的入口是 setup 函数,采用了函数式风格后可以享受如下好处:类型自动推导、减少打包体积。

setup 函数返回值就是注入到页面模版的变量。我们也可以返回一个函数,通过使用 value 这个 API 产生属性并修改:

import { value } from 'vue'const MyComponent = { setup(props) { const msg = value('hello') const appendName = () => { msg.value = `hello ${props.name}` } return { msg, appendName } }, template: `<div @click="appendName">{{ msg }}</div>`}

要注意的是,value() 返回的是一个对象,通过 .value 才能访问到其真实值。

为何 value() 返回的是 Wrappers 而非具体值呢?原因是 Vue 采用双向绑定,只有对象形式访问值才能保证访问到的是最终值,这一点类似 React 的 useRef() API 的 .current 规则。

那既然所有 value() 返回的值都是 Wrapper,那直接给模版使用时要不要调用 .value 呢?答案是否定的,直接使用即可,模版会自动 Unwrapping:

const MyComponent = { setup() { return { count: value(0) } }, template: `<button @click="count++">{{ count }}</button>`}

接下来是 Hooks,下面是一个使用 Hooks 实现获得鼠标实时位置的例子:

function useMouse() { const x = value(0) const y = value(0) const update = e => { x.value = e.pageX y.value = e.pageY } onMounted(() => { window.addEventListener('mousemove', update) }) onUnmounted(() => { window.removeEventListener('mousemove', update) }) return { x, y }}// in consuming componentconst Component = { setup() { const { x, y } = useMouse() const { z } = useOtherLogic() return { x, y, z } }, template: `<div>{{ x }} {{ y }} {{ z }}</div>`}

可以看到,useMouse 将所有与 “处理鼠标位置” 相关的逻辑都封装了进去,乍一看与 React Hooks 很像,但是有两个区别:

    useMouse 函数内改变 x、y 后,不会重新触发 setup 执行。 x y 拿到的都是 Wrapper 而不是原始值,且这个值会动态变化。

另一个重要 API 就是 watch,它的作用类似 React Hooks 的 useEffect,但实现原理和调用时机其实完全不一样。

watch 的目的是监听某些变量变化后执行逻辑,比如当 id 变化后重新取数:

const MyComponent = { props: { id: Number }, setup(props) { const data = value(null) watch(() => props.id, async (id) => { data.value = await fetchData(id) }) }}

之所以要 watch,因为在 Vue 中,setup 函数仅执行一次,所以不像 React Function Component,每次组件 props 变化都会重新执行,因此无论是在变量、props 变化时如果想做一些事情,都需要包裹在 watch 中。

后面还有 unwatching、生命周期函数、依赖注入,都是一些语法定义,感兴趣可以继续阅读原文,笔者就不赘述了。

3. 精读

对于 Vue 3.0 的 Function API + Hooks 与 React Function Component + Hooks,笔者做一些对比。

Vue 与 React 逻辑结构

React Function Component 与 Hooks,虽然在实现原理上,与 Vue3.0 存在 Immutable 与 Mutable、JSX 与 Template 的区别,但逻辑理解上有着相通之处。

const MyComponent = { setup(props) { const x = value(0) const setXRandom = () => { x.value = Math.random() } return { x, setXRandom } }, template: ` <button @onClick="setXRandom"/>{{x}}</button> `}

虽然在 Vue 中,setup 函数仅执行一次,看上去与 React 函数完全不一样(React 函数每次都执行),但其实 Vue 将渲染层(Template)与数据层(setup)分开了,而 React 合在了一起。

我们可以利用 React Hooks 将数据层与渲染层完全隔离:

// 类似 vue 的 setup 函数function useMyComponentSetup(props) { const [x, setX] = useState(0) const setXRandom = useCallback(() => { setX(Math.random()) }, [setX]) return { x, setXRandom }}// 类似 vue 的 template 函数function MyComponent(props: { name: String }) { const { x, setXRandom } = useMyComponentSetup(props) return ( <button onClick={setXRandom}>{x}</button> )}

这源于 JSX 与 Template 的根本区别。JSX 使模版与 JS 可以写在一起,因此数据层与渲染层可以耦合在一起写(也可以拆分),但 Vue 采取的 Template 思路使数据层强制分离了,这也使代码分层更清晰了。

而实际上 Vue3.0 的 setup 函数也是可选的,再配合其支持的 TSX 功能,与 React 真的只有 Mutable 的区别了:

// 这是个 Vue 组件const MyComponent = createComponent((props: { msg: string }) => { return () => h('div', props.msg)})

我们很难评价 Template 与 JSX 的好坏,但为了更透彻的理解 Vue 与 React,需要抛开 JSX&Template,Mutable&Immutable 去看,其实去掉这两个框架无关的技术选型,React@16 与 Vue@3 已经非常像了。

Vue3.0 的精髓是学习了 React Hooks 概念,因此正好可以用 Hooks 在 React 中模拟 Vue 的 setup 函数。

关于这两套技术选型,已经是相对完美的组合,不建议在 JSX 中再实现类似 Mutable + JSX 的花样来(因为喜欢 Mutable 可以用 Vue 呀): Vue:Mutable + Template React:Immutable + JSX

真正影响编码习惯的就是 Mutable 与 Immutable,使用 Vue 就坚定使用 Mutable,使用 React 就坚定使用 Immutable,这样能最大程度发挥两套框架的价值。

Vue Hooks 与 React Hooks 的差异

先看 React Hooks 的简单语法:

const [ count, setCount ] = useState(0)const setToOne = () => setCount(1)

Vue Hooks 的简单语法:

const count = value(0)const setToOne = () => count.value = 1

之所以 React 返回的 count 是一个数字,是因为 Immutable 规则,而 Vue 返回的 count 是个对象,拥有 count.value 属性,也是因为 Vue Mutable 规则导致,这使得 Vue 定义的所有变量都类似 React 中 useRef 定义变量,因此不存 React capture value 的特性。

关于 capture value 更多信息,可以阅读精读《Function VS Class 组件》 Capute Value 介绍

另外,对于 Hooks 的值变更机制也不同,我们看 Vue 的代码:

const Component = { setup() { const { x, y } = useMouse() const { z } = useOtherLogic() return { x, y, z } }, template: `<div>{{ x }} {{ y }} {{ z }}</div>`}

由于 setup 函数仅执行一次,怎么做到当 useMouse 导致 x、y 值变化时,可以在 setup 中拿到最新的值?

在 React 中,useMouse 如果修改了 x 的值,那么使用 useMouse 的函数就会被重新执行,以此拿到最新的 x,而在 Vue 中,将 Hooks 与 Immutable 深度结合,通过包装 x.value,使得当 x 变更时,引用保持不变,仅值发生了变化。所以 Vue 利用 Proxy 监听机制,可以做到 setup 函数不重新执行,但 Template 重新渲染的效果。

这就是 Mmutable 的好处,Vue Hooks 中,不需要 useMemo useCallback useRef 等机制,仅需一个 value 函数,直观的 Mutable 修改,就可以实现 React 中一套 Immutable 性能优化后的效果,这个是 Mutable 的魅力所在。

Vue Hooks 的优势

笔者对 RFC 中对 Vue、React Hooks 的对比做一个延展解释:

首先最大的不同:setup 仅执行一遍,而 React Function Component 每次渲染都会执行。

Vue 的代码使用更符合 JS 直觉。

这句话直截了当戳中了 JS 软肋,JS 并非是针对 Immutable 设计的语言,所以 Mutable 写法非常自然,而 Immutable 的写法就比较别扭。

当 Hooks 要更新值时,Vue 只要用等于号赋值即可,而 React Hooks 需要调用赋值函数,当对象类型复杂时,还需借助第三方库才能保证进行了正确的 Immutable 更新。

对 Hooks 使用顺序无要求,而且可以放在条件语句里。

对 React Hooks 而言,调用必须放在最前面,而且不能被包含在条件语句里,这是因为 React Hooks 采用下标方式寻找状态,一旦位置不对或者 Hooks 放在了条件中,就无法正确找到对应位置的值。

而 Vue Function API 中的 Hooks 可以放在任意位置、任意命名、被条件语句任意包裹的,因为其并不会触发 setup 的更新,只在需要的时候更新自己的引用值即可,而 Template 的重渲染则完全继承 Vue 2.0 的依赖收集机制,它不管值来自哪里,只要用到的值变了,就可以重新渲染了。

不会再每次渲染重复调用,减少 GC 压力。

这确实是 React Hooks 的一个问题,所有 Hooks 都在渲染闭包中执行,每次重渲染都有一定性能压力,而且频繁的渲染会带来许多闭包,虽然可以依赖 GC 机制回收,但会给 GC 带来不小的压力。

而 Vue Hooks 只有一个引用,所以存储的内容就非常精简,也就是占用内存小,而且当值变化时,也不会重新触发 setup 的执行,所以确实不会造成 GC 压力。

必须要总包裹 useCallback 函数确保不让子元素频繁重渲染。

React Hooks 有一个问题,就是完全依赖 Immutable 属性。而在 Function Component 内部创建函数时,每次都会创建一个全新的对象,这个对象如果传给子组件,必然导致子组件无法做性能优化。 因此 React 采取了 useCallback 作为优化方案:

const fn = useCallback(() => /* .. */, [])

只有当第二个依赖参数变化时才返回新引用。但第二个依赖参数需要 lint 工具确保依赖总是正确的(关于为何要对依赖诚实,感兴趣可以移步 精读《Function Component 入门》 - 永远对依赖诚实)。

回到 Vue 3.0,由于 setup 仅执行一次,因此函数本身只会创建一次,不存在多实例问题,不需要 useCallback 的概念,更不需要使用lint 插件 保证依赖书写正确,这对开发者是实实在在的友好。

不需要使用 useEffect useMemo 等进行性能优化,所有性能优化都是自动的。

这也是实在话,毕竟 Mutable + 依赖自动收集就可以做到最小粒度的精确更新,根本不会触发不必要的 Rerender,因此 useMemo 这个概念也不需要了。

而 useEffect 也需要传递第二个参数 “依赖项”,在 Vue 中根本不需要传递 “依赖项”,所以也不会存在用户不小心传错的问题,更不需要像 React 写一个 lint 插件保证依赖的正确性。(这也是笔者想对 React Hooks 吐槽的点,React 团队如何保障每个人都安装了 lint?就算装了 lint,如果 IDE 有 BUG,导致没有生效,随时可能写出依赖不正确的 “危险代码”,造成比如死循环等严重后果)

4. 总结

通过对比 Vue Hooks 与 React Hooks 可以发现,Vue 3.0 将 Mutable 特性完美与 Hooks 结合,规避了一些 React Hooks 的硬伤。所以我们可以说 Vue 借鉴了 React Hooks 的思想,但创造出来的确实一个更精美的艺术品。

但 React Hooks 遵循的 Immutable 也有好的一面,就是每次渲染中状态被稳定的固化下来了,不用担心状态突然变更带来的影响(其实反而要注意状态用不变更带来的影响),对于数据记录、程序运行的稳定性都有较高的可预期性。

最后,对于喜欢 Mutable 的开发者,Vue 3.0 是你的最佳选择,基于 React + Mutable 搞的一些小轮子做到顶级可能还不如 Vue 3.0。对于 React 开发者来说,坚持你们的 Immutable 信仰吧,Vue 3.0 已经将 Mutable 发挥到极致,只有将 React Immutable 特性发挥到极致才能发挥 React 的最大价值。

讨论地址是:精读《Vue3.0 Function API》 · Issue #173 · dt-fe/weekly

到此这篇关于精读《Vue3.0 Function API》的文章就介绍到这了,更多相关Vue3.0 Function API内容请搜索真格学网以前的文章或继续浏览下面的相关文章希望大家以后多多支持真格学网!

看看日志,写了什么,我和你报npm提示了一样的错误,我发现是我ip换了,把IP关了就好了。不知道你的报错原因是什么,希望能帮到你哟,npm ERR!道 code ELIFECYCLEnpm ERR!内 errno 1npm ERR! jd@0.1.0 serve: `容vue-cli-service serve`npm ERR! Exit status 1npm ERR!npm ERR! Failed at the jd@0.1.0 serve script.npm ERR! This is probably not a problem with npm. There is likely additional logging output above.npm ERR! A complete log of this run can be found in:npm ERR! C:\Users\pc\AppData\Roaming\npm-cache\_logs\2019-06-09T10_32_58_084Z-debug.log内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • vue 3.0 前瞻vue function api新特性体验
  • 说说vue.js中的functional函数化组件的使用
  • vue组件中的data必须是一个function的原因浅析
  • vue深入解析之render function code详解
  • vue-router跳转页面的方法
  • 如何在 vue.js 中使用第三方js库
  • 使用vue-cli3 创建vue项目并配置vs code 自动代码格式化 vue语法
  • vue中的v-for循环key属性注意事项小结
  • 详解auto-vue-file:一个自动创建vue组件的包
  • vue-cli3使用mock数据的方法分析
  • vue在手机中通过本机ip地址访问webapp的方法
  • vuejs2.0子组件改变父组件的数据实例
  • vue.js仿metronic高级表格(二)数据渲染
  • vue无限滑动周选择日期的组件的示例代码
  • 在开发vue3.0项目时 cnpm run serve启动项目报错 求大神指点 怎么解决
  • vue3.0 bootstrap怎么无法识别这括号
  • vue升级到3.5的如何运行2.0的项目
  • vue中如何引入color-js@1.0.3
  • vue3.0脚手架为什么一引入iview就报错
  • 未转变者3.0箱子怎么弄,需要什么。3.0版本的
  • vue create 和vue init webpack的区别
  • 1/3×3=1,1/3=0.3…,3×0.3…=0.9…,这是为什么
  • msg3.0是什么
  • 新闻上说的“工业3.0,3.5,4.0”是什么意思呀?求通俗解释
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全yui.ext相关prototypejqueryangularjsjsonlib_jsjs面向对象extjsmootoolsseajsdojovue.jsbackbone.js其它首页javascriptjavascript类库vue.jsvue 3.0 前瞻vue function api新特性体验说说vue.js中的functional函数化组件的使用vue组件中的data必须是一个function的原因浅析vue深入解析之render function code详解vue-router跳转页面的方法如何在 vue.js 中使用第三方js库使用vue-cli3 创建vue项目并配置vs code 自动代码格式化 vue语法vue中的v-for循环key属性注意事项小结详解auto-vue-file:一个自动创建vue组件的包vue-cli3使用mock数据的方法分析vue在手机中通过本机ip地址访问webapp的方法vuejs2.0子组件改变父组件的数据实例vue.js仿metronic高级表格(二)数据渲染vue无限滑动周选择日期的组件的示例代码vue引用js文件的多种方式(推荐)简单理解vue中props属性vue之父子组件间通信实例讲解(prvue props用法详解(小结)vue元素的隐藏和显示(v-show指令vue.js常用指令汇总(v-if、v-fovue 进阶教程之v-model详解使用vue实现图片上传的三种方式vue.js实战之利用vue-router实现vue.js中的图片引用路径的方式vuex实现简易计数器详解如何将 vue-cli 改造成支持多页面的 解决vue项目打包后提示图片文件路径错误的解决vue 刷新页面导航显示高亮位置不对问利用vue+elementui实现部分引入组件的方法vue回到顶部监听滚动事件详解解决vuejs 使用value in list 循环遍历数vue函数式组件-你值得拥有vue轮播组件实现$children和$parent 附带详解用vue编写弹出框组件
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved