vue3 window scroll 自动被触发_精读Vue 3.0 Function API-CSDN博客

本文链接：https://blog.csdn.net/weixin_42499790/article/details/113668376

本文深入探讨了Vue 3.0的Function API，尤其是setup函数和Hooks，与React Hooks的差异。Vue 3.0的setup仅执行一次，而React函数每次渲染都会执行。Vue Hooks使用更符合JS直觉，不需考虑Hooks顺序和条件语句限制。Vue Hooks通过Mutable特性减少了性能优化的压力，而React Hooks需要额外的性能优化手段如useCallback和useMemo。文章总结了Vue 3.0如何借鉴并超越React Hooks，为开发者提供了更优的体验。

摘要由CSDN通过智能技术生成

1. 引言

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

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

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

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

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

没有呀，这次精读的稿子就是 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：

count is {
    { count }}plusOne is {
    { plusOne }} @click="increment">count++

import {
    value, computed, watch, onMounted } from 'vue'export default {
   
 setup() {
   // reactive stateconst count = value(0)// computed stateconst plusOne = computed(() => count.value + 1)// methodconst increment = () => {
    count.value++ }// watch
 watch(() => count.value * 2, val => {
   
 console.log(`count * 2 is ${
   val}`)})// lifecycle
 onMounted(() => {
   
 console.log(`mounted`)})// expose bindings on render contextreturn {
   
 count,
 plusOne,
 increment}}}

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

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

import {
     value } from 'vue'const MyComponent = {
    
  setup(props) {
    const msg = value('hello')const appendName = () => {
    
      msg.va