AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

Vue和React对比学习之路由(Vue-Router、React-Router)

2023-04-27 494
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Router

简介

今天我们再来对比学习下Vue-Router和React-Router。

如果你已经熟练使用Vue-Router和React-Router，并且也知道Vue-Router4新特性和React-Router6新特性可以直接阅读本文。如果还不清的话可以先看看笔者前面写的Vue-Router3和Vue-Router4的对比，以及React-Router4/5和React-Router6的对比。

希望通过这种对比方式的学习能让我们学习的时候印象更深刻，希望能够帮助到大家。

路由模式

路由模式这块Vue-Router和React-Router都支持原生浏览器行为的history、hash模式和使用数据结构实现的abstract/memory模式。

但是使用方式上稍有区别。

Vue-Router支持 history、hash、abstract

Vue-Router的路由模式是在创建时指定的。

const router = createRouter({
  mode: "history",
  routes
})

React-Router支持 history、hash、memory

React-Router是在具体使用的时候指定的。

<BrowserRouter>
  <App />
</BrowserRouter>

路由跳转

Vue-Router和React-Router都支持链接式导航和编程式导航，并且都支持自定义设置激活链接的样式。

Vue-Router使用<router-link />实现链接式导航

<router-link to="/home">Home</router-link>

Vue-Router使用this.$router或useRouter实现编程式导航

// Vue-Router3
this.$router.push("/home")
this.$router.replace("/home")

// Vue-Router4
const router = useRouter()
router.push("/home")
router.replace("/home")

React-Router使用<Link />、<NavLink />实现链接式导航

<Link to="/home">Home</Link>

// 可以定义激活时的class或者style，也就是多了样式设置。
<NavLink to="/home">Home</NavLink>

React-Router使用history或navigate实现编程式导航

// React-Router4/5 类组件
this.props.history.push("/home")
this.props.history.replace("/home")

// React-Router6 函数组件
const navigate = useNavigate()
navigate("/home")

路由渲染

在Vue-Router中，使用 <router-view /> 组件就能把匹配到组件渲染出来，而React-Router需要使用定义路由的<Route />组件或<Outlet />。

Vue-Router 使用 <router-view />就能把匹配到的组件渲染出来。

在 Vue 中我们传递路由配置创建好路由后，只需要使用<router-view />就能把匹配到的组件渲染出来。

// App.vue

<template>
  <router-view />
</template>

React-Router 使用 <Route /> 或 <Outlet />

在React中，不用提前通过配置文件创建路由，而是在使用的时候才定义路由，所以定义路由和路由渲染是在一起的，都是使用 <Route /> 组件。

<Switch>
  <Route path="/home" component={Home}></Route>
</Switch>

在React-Router6中子组件支持<Outlet />的写法，具体可以看React-Router4/5和React-Router6的对比。

// User.jsx 子组件 

<Outlet />

路由参数

Vue-Router和React-Router都支持路由参数的传递和获取，并且都支持显示传参和隐式传参。

Vue-Router 使用router传递参数

Vue-Router支持传递query和params两种参数，使用时需要注意以下两点。

  1. query传参会在浏览器路径看到，并且刷新页面参数不会丢失。
  2. params传参会在浏览器路径看不到，并且刷新页面参数会丢失。并且可以用在普通路由或动态参数路由上。但是需要注意，当应用到动态参数路由上时我们就不能通过params传参了，只能通过params动态传参。
// vue-Router3

// params传参
this.$router.push({ name: 'user', params: { name: 'randy' } })

// query传参
this.$router.push({ path: '/register', query: { name: 'randy' } })

// Vue-Router4

const router = useRouter()
// params传参
router.push({ name: 'user', params: { name: 'randy' } })
// query传参
router.push({ path: '/register', query: { name: 'randy' } })

Vue-Router 使用query和params接收参数

// Vue-Router3
this.$route.query.xxx
this.$route.params.xxx

// Vue-Router4
const route = useRoute()
route.query.xxx
route.params.xxx

React-Router使用history或navigate传参

React-Router支持传递search、params和state三种参数，使用时需要注意以下三点。

  1. search传参会在浏览器路径看到，并且刷新页面参数不会丢失。但是参数需要自己获取并处理，一般我们使用URLSearchParams处理。
  2. params传参只能应用在动态路由上，普通路由传参不能使用。
  3. state传参不会在浏览器路径看到，在history模式下刷新页面参数不会丢失，但是在hash模式下刷新页面参数会丢失。
// React-Router4/5
this.props.history.push({
  pathname: "route3",
  search: "?sort=name",
  hash: "#the-hash",
  state: { fromDashboard: 1 },
});

// React-Router6
navigate(
  { pathname: "../route3/78", search: "name=demi", hash: "hash3" },
  {
    state: { fromDashboard: "navigate state" },
    replace: false,
  }
);

React-Router使用search、params和state接收参数

// React-Router4/5类组件
this.props.location.state
this.props.location.search
this.props.match.params
// React-Router4/5函数式组件
const params = useParams()
const location = useLocation()
location.state
location.search //search字符串参数 '?name=randy'

// React-Router6
const params = useParams()
const location = useLocation()
location.state
location.search //search字符串参数 '?name=randy'

const [searchParams, setSearchParams] = useSearchParams(); // search参数，已经使用URLSearchParams封装好了

监听动态路由参数变化

Vue-Router和React-Router都支持动态路由，都能通过params获取到动态路由参数。

动态路由在Vue和React中都做了优化，也就是动态参数的变化并不会让组件重新创建和销毁。也就不会触发组件创建、绑定和销毁相关的钩子函数。所以经常会遇到我们写在mounted或者unmounted中的代码不会被重新触发的问题。

比如我们写在mounted生命周期函数中的逻辑，通过获取动态参数然后去后台请求获取数据，参数改变需要重新获取数据的逻辑就行不通了，那应该怎么修改呢？

Vue-Router监听参数变化的五种方式

在Vue中我们可以通过beforeUpdate、updated、beforeRouteUpdate、watch、watchEffect五种方式来监听动态路由参数的变化。

动态路由参数的变化会触发beforeUpdate、updated生命周期函数以及beforeRouteUpdate路由组件内钩子函数。所以上面的例子，通过动态参数获取后台数据的逻辑可以在这些钩子中任选一个加上就可以。推荐使用updated。

onBeforeUpdated(() => {
  console.log("route2 onUpdated",route.params.id);
});

onUpdated(() => {
  console.log("route2 onUpdated",route.params.id);
});
    
onBeforeRouteUpdate((to, from) => {
  console.log("route2 onBeforeRouteUpdate", to, from);
});

或者使用watch、watchEffect监听路由的方式来监听参数的变化也是可以的。

watch(
  () => route.params.id,
  (newVal, oldVal) => {
    console.log("watch route: ", newVal, oldVal);
  }
);

watchEffect(() => {
  console.log("watchEffect route: ", route.params.id);
});

如果配置了props模式的话我们还可以监听props。

watch(
  () => props.id,
  (newVal, oldVal) => {
    console.log("watch props: ", newVal, oldVal);
  }
);

watchEffect(() => {
  console.log("watchEffect props: ", props.id);
});

React-Router监听参数变化的四种方式

在React中我们可以通过老版本生命周期函数componentWillReceiveProps、componentWillUpdate、componentDidUpdate或新版本生命周期函数getDerivedStateFromProps、getSnapshotBeforeUpdate、componentDidUpdate以及watchEffect四种方式来监听动态路由参数的变化。

动态路由参数的变化会触发老版本生命周期函数componentWillReceiveProps、componentWillUpdate、componentDidUpdate或新版本生命周期函数getDerivedStateFromProps、getSnapshotBeforeUpdate、componentDidUpdate生命周期函数所以上面的例子，通过动态参数获取后台数据的逻辑可以在这些钩子中任选一个加上就可以。推荐使用componentDidUpdate。

如果是函数组件还可以使用useEffect监听路由的方式来监听参数的变化。

const params = useParams()

useEffect(() => {
  console.log(params);
}, [params]);

路由匹配规则

在Vue-Router和React-Router中，不配置任何规则相关参数的话默认是不用区分大小写和尾部/的。

比如我们配置了一个路由/user/info，在Vue和React中下面这些路径都是可以匹配上的。

/user/info
/user/info/
/USER/INFO
/USER/INFO/
...

Vue-Router支持strict、sensitive

在Vue-Router3只支持配置canSensitive来控制是否忽略大小写。在Vue-Router4支持strict、sensitive来控制是否忽略尾部/和是否忽略大小写。

{
  path: "/home",
  component: Home,
  strict,
  sensitive
}

React-Router支持strict、sensitive

在React-Router中一直支持strict、sensitive来控制是否忽略尾部/和是否忽略大小写。

<Route path="/home" element={<Home />} strict sensitive>

路由获取

Vue任何组件都能获取

在Vue中，只要使用了路由，不管是不是路由组件都可以获取到路由（也就是能方便的使用router和route）。

React非路由组件默认获取不到

但是在React中，非路由组件是不会自动在props中注入路由相关参数的(也就是在props中没有history、location、match)，这就需要用到withRouter高阶组件了。使用了withRouter后才能在非路由使用history、location、match。

当然如果是函数组件我们还可以使用路由相关hooks获取的。

滚动行为

使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。 Vue-Router 能方便的做到，它让你可以自定义路由切换时页面如何滚动。

但是React-Router并没有封装这一块的东西，需要自己实现。

Vue-Router定义scrollBehavior即可

const router = createRouter({
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return { top: 0 }
    }
  },
})

React-Router需要自己实现

window.scroll(00, 0)

路由嵌套

Vue-Router通过配置方式创建路由，路由嵌套一直都很方便使用。

但是React-Router就没那么容易了，需要继续在子组件定义路由。

Vue路由嵌套可直接配置

Vue-Router只需要在routes里面配置好就可以了。

{
  path: "/home",
  component: Home,
  children: [
    {
      path: "/child1",
      component: Child1,
    }
  ]
}

父组件只需要使用<router-view />就能渲染出子组件。

// Home
<template>
  <router-view />
</template>

React路由嵌套需要在子组件定义

在React-Router4/5中，子组件需要继续定义它的孙子组件。

// App.jsx 父组件
<Switch>
  <Route path="/home" component={<Home/>} />
  <Route path="/user" component={<User/>} />
</Switch>

// User.jsx 子组件
<Switch>
  <Route path="/user/info" component={<UserInfo/>} />
  <Route path="/user/detail" component={<UserDetail/>} />
</Switch>

当然React-Router6得到了改进，可以在根组件直接一次性配置。

// App.jsx 父组件
<Routes>
  <Route path="/home" element={<Home/>} />
  <Route path="/user" element={<User/>}>
    <Route path="info" element={<UserInfo/>} />
    <Route path="detail" element={<UserDetail/>} />
  </Route>
</Routes>

// User.jsx 子组件
<Outlet />

配置式路由

Vue-Router一直使用的是配置式路由，配置渲染相分离很方便。但是React-Router如果想要使用配置式路由的话，需要我们自己使用map或者借助react-router-config插件来完成。好消息是React-Router6有了很大的改进。

Vue-Router直接使用配置式路由

Vue-Router一直使用的是配置式路由，这个就不细说了。

{
  path: "/home",
  component: Home,
  children: [
    {
      path: "/child1",
      component: Child1,
    }
  ]
}

React-Router4/5 使用 map 或 react-router-config

首先我们需要定义routes

// routerConfig/routes.js

import Parent from "./Parent";
import Child1 from "./Child1";
import Child2 from "./Child2";

const routes = [
  {
    component: Parent,
    path: "/parent",
    routes: [
      {
        path: "/parent/child1",
        exact: true,
        component: Child1,
      },
      {
        path: "/parent/child2",
        component: Child2,
      },
    ],
  },
];

export default routes;

在根组件，我们需要自己使用map遍历渲染，并把子路由通过routes传递下去。

import routes from "./routerConfig/routes";

<BrowserRouter>
  <Switch>
    {routes.map((route) => {
      return (
        <Route
          path={route.path}
          key={route.path}
          render={(props) => {
            return (
              <route.component
                {...props}
                routes={route.routes}
              ></route.component>
            );
          }}
        ></Route>
      );
    })}
  </Switch>
</BrowserRouter>

在子组件我们还需要继续使用map遍历渲染。

// Parent.js

<Switch>
  {this.props.routes.map((route) => {
    return (
      <Route
        path={route.path}
        key={route.path}
        render={(props) => {
          return (
            <route.component
              {...props}
              routes={route.routes}
            ></route.component>
          );
        }}
      ></Route>
    );
  })}
</Switch>

是不是很复杂，但是我们可以使用react-router-config插件进行简化。

首先安装react-router-config

npm i react-router-config

在根组件，我们只需要使用renderRoutes方法就可以了。

import { renderRoutes } from "react-router-config";
import routes from "./routerConfig/routes";

{renderRoutes(routes)}

在子组件我们继续使用renderRoutes。

// Parent.js

{renderRoutes(this.props.routes)}

相对自己写遍历是不是方便了很多呢？其实react-router-config插件内部实现跟笔者上面写的差不多。

React-Router6 使用 useRoutes

在React-Router6能更方便的实现。只需要使用useRoutes方法。

首先定义routes

// routerConfig/routes.js

import Parent from "./Parent";
import Child1 from "./Child1";
import Child2 from "./Child2";

const routes = [
  {
    element: <Parent></Parent>,
    path: "/parent",
    children: [
      {
        path: "child1",
        element: <Child1></Child1>,
      },
      {
        path: "child2",
        element: <Child2></Child2>,
      },
    ],
  },
];

在根组件，我们只需要使用useRoutes方法就可以了。

这里需要注意useRoutes是hook，所以只能在函数组件或自定义组件使用。

import { useRoutes } from "react-router-dom";
import routes from "./routerConfig/routes";

function App() {
 return {useRoutes(routes)}
}

在子组件我们继续使用Outlet渲染子组件就可以了。

// Parent.js
import { Outlet } from "react-router-dom";

<Outlet />

路由钩子

Vue-Router实现了7个钩子函数

Vue-Router实现了7个钩子函数，可以清除的知道从哪个路由来并去哪个路由。还可以通过next方法我们可以很方便的对路由跳转进行控制。

beforeEach(to, from, next)
beforeResolve(to, from, next)
beforeEnter(to, from, next)
beforeRouteEnter(to, from, next)
beforeRouteUpdate(to, from, next)
beforeRouteLeave(to, from, next)
afterEach(to, from)

比如我们取消跳转，只需要给next()方法传递false就可以了，非常方便。

beforeEach(to, from, next) {
  console.log(to, from)
  // 阻止跳转
  next(false)
}

React-Router没有钩子函数

在React-Router中并没有实现钩子函数，只在history上提供了listen、block两个函数。

listen用来监听路由的变化，路由变了就会被触发。但是需要注意，点击相同路由也会被触发。

componentDidMount() {
  // 路由监听，统一路由重复点击也会重复触发
  this.unlisten = this.props.history.listen((location, action) => {
    console.log(location, action);
  });

// 组件卸载时，解除监听
componentWillUnmount() {
  this.unlisten();
}

block用来阻止路由跳转，可以实现Vue-Router中类似next(false)的功能。

componentDidMount() {
  this.unblock = this.props.history.block((location, action) => {
    console.log(location, action);
    return "离开？";
  });
}

// 组件卸载时，解除监听
componentWillUnmount() {
  this.unblock();
}

上面的例子当我们点击路由跳转后会弹出

image.png

由于React-Router6已经移除了history，所以上面的例子只针对React-Router4/5。

路由鉴权

路由鉴权这块可以说是每个系统中必备的。

在Vue-Router中我们通过钩子函数就能很好实现。但是React-Router相对来说就没那么方便。

Vue-Router中通过钩子函数

比如我们常用的登录权限判断就可以写在beforeEach(to, from, next)中。

beforeEach(to, from, next) {
  const token = localStorage.getItem("token")
  if(token) {
    next()
  } else {
    if(to.paht==="/login") {
      next()
    } else {
      next("/login")
    }
  }
}

React-Router中通过 listen 或高阶组件

我们可以在根组件，使用listen来实现登录权限判断。

componentDidMount() {
  this.unlisten = this.props.history.listen((location, action) => {
    const { pathname } = location;
    const token = localStorage.getItem("token")
    if(!token && pathname !== "/login") {
      this.props.history.replace('/login')
    }
  });

// 组件卸载时，解除监听
componentWillUnmount() {
  this.unlisten();
}

或者使用HOC

假设我们的路由配置如下

const routes = [
  {
    component: Parent,
    path: "/parent",
    auth: false,
    routes: [
      {
        path: "/parent/child1",
        component: Child1,
        auth: false,
      },
      {
        path: "/parent/child2",
        component: Child2,
        auth: true,
      },
    ],
  },
  {
    path: "/login",
    component: Login,
    auth: false,
  },
];

export default routes;

然后我们定义一个Auth高阶组件，用来判断用户是否登录。

import React from "react";
import { Route, Redirect } from "react-router-dom";

function Auth(props) {
  const { component: Component, path, auth, routes } = props;

  const token = localStorage.getItem("token");

  if (!auth) {
    return (
      <Route
        path={path}
        render={(props) => <Component {...props} routes={routes} />}
      ></Route>
    );
  }

  // 如果用户有权限，就渲染对应的路由
  if (auth && token) {
    return (
      <Route
        path={path}
        render={(props) => <Component {...props} routes={routes} />}
      ></Route>
    );
  } else {
    // 如果没有权限，返回配置的默认路由
    return <Redirect to="/login" />;
  }
}

export default Auth;

根组件我们渲染的时候使用我们的Auth组件包裹。

// index.js

import routes from "./routerConfig/routes";

<BrowserRouter>
<Switch>
  {routes.map((route) => {
    return (
      // 路由鉴权
      <Auth key={route.path} {...route}></Auth>
    );
  })}
</Switch>
</BrowserRouter>

子组件我们也使用Auth组件包裹。

// Parent.js

<Switch>
  {this.props.routes.map((route) => {
    return (
      // 路由鉴权
      <Auth key={route.path} {...route}></Auth>
    );
  })}
</Switch>

这样就达到了路由鉴权的效果，当我们本地没token的时候，进入/parent/child2是会重定向到/login页面的。

路由原信息

Vue-Router中路由元信息已经封装好。但是在React-Router中是需要我们通过HOC来实现。

Vue-Router使用meta定义原数据

Vue-Router我们只需要使用meta存放好信息后面通过this.$route.meta就能获取。

// 定义
{
  path: "/home",
  component: Home,
  meta: {title: "home"}
}

// 获取
this.$route.meta.title

React-Router使用HOC

类似上面的鉴权，首先在路由配置里面定义好元数据。

const routes = [
  {
    component: Parent,
    path: "/parent",
    auth: false,
    meta: { title: "Parent" },
    routes: [
      {
        path: "/parent/child1",
        component: Child1,
        auth: false,
        meta: { title: "Child1" },
      },
      {
        path: "/parent/child2",
        component: Child2,
        auth: true,
        meta: { title: "Child2" },
      },
    ],
  },
  {
    path: "/login",
    component: Login,
    auth: false,
    meta: { title: "Login" },
  },
];

export default routes;

然后我们需要定义一个HOC高阶组件。最后最重要的就是我们传递给子组件的属性不再具体的传递routes而是otherProps。这样子组件通过props.meta就能获取到元数据啦。

import React from "react";
import { Route, Redirect } from "react-router-dom";

function Auth(props) {
  const { component: Component, path, auth, ...otherProps } = props;

  const token = localStorage.getItem("token");

  if (!auth) {
    return (
      <Route
        path={path}
        render={(props) => <Component {...props} {...otherProps} />}
      ></Route>
    );
  }

  // 如果用户有权限，就渲染对应的路由
  if (auth && token) {
    return (
      <Route
        path={path}
        render={(props) => <Component {...props} {...otherProps} />}
      ></Route>
    );
  } else {
    // 如果没有权限，返回配置的默认路由
    return <Redirect to="/login" />;
  }
}

export default Auth;

在子组件通过props获取

props.meta.title

image.png

动态路由

Vue-Router需要使用addRoute、addRoute方法

由于Vue-Router在创建路由的时候就需要传递路由配置routes，所以导致在动态添加路由这块不够灵活，需要使用addRoute或addRoutes方法。

React-Router直接渲染即可

由于React-Router不需要提前创建路由，所以可以很轻松的实现路由的动态添加，只需要拿到新路由渲染出来即可。

对比总总结

总体感觉Vue-Router封装的更完善，React-Router更灵活。并且它们相互借鉴，分别引用各自的优点，不断更新达到完善。

相同点

  1. 都支持三种路由模式。
  2. 都支持链接式和编程式导航。
  3. 都支持显示和隐式传参。
  4. 都支持动态路由参数，并且都做了优化，动态参数的改变不会导致组件的重新创建和销毁，并通过各自的方法检测到参数的变化。
  5. 都支持路由匹配规则的设置，可以设置大小写和尾/。
  6. 都支持路由嵌套。
  7. 都支持配置式路由。
  8. 都支持动态路由。

不同点

  1. Vue-Router需要先通过路由配置创建后再使用，而React-Router是一边定义一边使用。
  2. 由于Vue-Router需要先创建再使用，所以在动态添加路由这方面比React-Router复杂，需要使用特定的方法。
  3. Vue-Router路由传参这块封装的更好，特别是query参数这块，以对象的形式使用非常方便。但是React-Router需要自己使用URLSearchParams处理。
  4. 在路由嵌套这块Vue-Router支持的更好，只需要在routes定义好就可以了。而React-Router需要在组件里面层层定义，但是React-Router6已经有了很大的改动，支持在根组件通过嵌套的方式一次性定义好。
  5. Vue-Router封装了7个钩子函数，我们可以很方便对路由实行鉴权以及路由原信息的定义。React-Router没有提供路由钩子函数，需要使用HOC。
  6. 在设置链接激活时的样式时，Vue-Router的<router-link />是自带被激活时的类名的，并且支持自定义。但是React-Router需要单独使用<NavLink>组件才会有被激活时的类名。
  7. 滚动行为Vue-Router已经封装好了，直接使用。但是React-Router需要自己实现。
  8. 配置式路由Vue-Router原生支持。但是React-Router需要使用map或者react-router-config插件来实现。当然React-Router6已经有了很大的优化，可以直接使用useRoutes来渲染配置路由。
  9. 在Vue中，每个组件都能获取到路由信息。但是在React中，只有路由组件才能获取到路由信息，非路由组件需要使用withRouter或者路由相关hooks。

系列文章

Vue和React对比学习之生命周期函数(Vue2、Vue3、老版React、新版React)

Vue和React对比学习之组件传值(Vue2 12种、Vue3 9种、React 7种)

Vue和React对比学习之Style样式

Vue和React对比学习之Ref和Slot

Vue和React对比学习之Hooks

Vue和React对比学习之路由(Vue-Router、React-Router)

Vue和React对比学习之状态管理 (Vuex和Redux)

Vue和React对比学习之条件判断、循环、计算属性、属性监听

后记

感谢小伙伴们的耐心观看，本文为笔者个人学习笔记，如有谬误，还请告知，万分感谢！如果本文对你有所帮助，还请点个关注点个赞~，您的支持是笔者不断更新的动力！

文章标签：
JavaScript
前端开发
网络架构
关键词：
React Native vue
React Native路由
vue React Native
React Native学习
VUE.js路由
苏苏同学
目录
相关文章
夏天49597
|
1月前
|
前端开发 API UED
React 路由守卫 Guarded Routes
【10月更文挑战第26天】本文介绍了 React 中的路由守卫（Guarded Routes），使用 `react-router-dom` 实现权限验证、登录验证和数据预加载等场景。通过创建 `AuthContext` 管理认证状态，实现 `PrivateRoute` 组件进行路由保护，并在 `App.js` 中使用。文章还讨论了常见问题和易错点，提供了处理异步操作的示例，帮助开发者提升应用的安全性和用户体验。
夏天49597
53 1
那年春天
|
28天前
|
存储 缓存 JavaScript
如何优化React或Vue应用的性能
需要注意的是，性能优化是一个持续的过程，需要根据具体的应用场景和性能问题进行针对性的优化。同时，不同的项目和团队可能有不同的优化重点和方法，要结合实际情况灵活运用这些优化策略，以达到最佳的性能效果。
那年春天
107 51
雨溪-yuxi
|
1月前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客！我是瑞雨溪，一名热爱前端的大一学生，专注于JavaScript与Vue，正向全栈进发。博客分享Vue学习心得、命令式与声明式编程对比、列表展示及计数器案例等。关注我，持续更新中！🎉🎉🎉
雨溪-yuxi
36 1
vue学习第一章
雨溪-yuxi
|
1月前
|
JavaScript 前端开发 索引
vue学习第三章
欢迎来到瑞雨溪的博客，一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中的v-bind指令，包括基本使用、动态绑定class及style等，希望能为你的前端学习之路提供帮助。持续关注，更多精彩内容即将呈现！🎉🎉🎉
雨溪-yuxi
26 1
vue学习第三章
雨溪-yuxi
|
1月前
|
缓存 JavaScript 前端开发
vue学习第四章
欢迎来到我的博客！我是瑞雨溪，一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中计算属性的基本与复杂使用、setter/getter、与methods的对比及与侦听器的总结。如果你觉得有用，请关注我，将持续更新更多优质内容！🎉🎉🎉
雨溪-yuxi
35 1
vue学习第四章
雨溪-yuxi
|
1月前
|
JavaScript 前端开发 算法
vue学习第7章(循环）
欢迎来到瑞雨溪的博客，一名热爱JavaScript和Vue的大一学生。本文介绍了Vue中的v-for指令，包括遍历数组和对象、使用key以及数组的响应式方法等内容，并附有综合练习实例。关注我，将持续更新更多优质文章！🎉🎉🎉
雨溪-yuxi
24 1
vue学习第7章(循环）
雨溪-yuxi
|
1月前
|
JavaScript 前端开发
vue学习第九章(v-model)
欢迎来到我的博客，我是瑞雨溪，一名热爱JavaScript与Vue的大一学生，自学前端2年半，正向全栈进发。此篇介绍v-model在不同表单元素中的应用及修饰符的使用，希望能对你有所帮助。关注我，持续更新中！🎉🎉🎉
雨溪-yuxi
29 1
vue学习第九章(v-model)
雨溪-yuxi
|
1月前
|
JavaScript 前端开发 开发者
vue学习第十章(组件开发）
欢迎来到瑞雨溪的博客，一名热爱JavaScript与Vue的大一学生。本文深入讲解Vue组件的基本使用、全局与局部组件、父子组件通信及数据传递等内容，适合前端开发者学习参考。持续更新中，期待您的关注！🎉🎉🎉
雨溪-yuxi
40 1
vue学习第十章(组件开发）
雨溪-yuxi
|
1月前
|
JavaScript 前端开发
vue学习第十一章（组件开发2）
欢迎来到我的博客，我是瑞雨溪，一名自学前端两年半的大一学生，专注于JavaScript与Vue。本文介绍Vue中的插槽（slot）使用方法，包括基本插槽、具名插槽及作用域插槽，帮助你在组件开发中实现内容的灵活定制。如果你觉得有帮助，请关注我，持续更新中！🎉🎉🎉
雨溪-yuxi
23 1
vue学习第十一章（组件开发2）
雨溪-yuxi
|
1月前
|
监控 JavaScript 前端开发
vue学习第十二章(生命周期）
欢迎来到我的博客，我是瑞雨溪，一名热爱JavaScript和Vue的大一学生。本文深入探讨了Vue实例的生命周期，从初始化到销毁各阶段的关键钩子函数及其应用场景，帮助你更好地理解Vue的工作原理。如果你觉得有帮助，欢迎关注我，将持续分享更多优质内容！🎉🎉🎉
雨溪-yuxi
24 1
vue学习第十二章(生命周期）

热门文章

最新文章

  • 1
    React：JSX语法入门
  • 2
    react-grapesjs——开源代码学习与修改（初出茅庐）（二）
  • 3
    react导出word文档？
  • 4
    React(四) ——hooks的使用
  • 5
    对React Native的了解？
  • 6
    #yyds干货盘点# 歌谣学前端之react笔记之学习之函数组件
  • 7
    react 高阶组件
  • 8
    react实战笔记56:添加新日志2
  • 9
    react实战笔记50:获取表单数据2
  • 10
    #私藏项目实操分享# 【React工作记录六】如何实现一个图片的伪预览效果
  • 1
    使用Vue.js构建交互式前端的技术探索
    89
  • 2
    ruoyi-nbcio-plus基于vue3的flowable为了适配文件上传改造VForm3的代码记录
    168
  • 3
    vue2升级到vue3的一些使用注意事项记录(四）
    132
  • 4
    ruoyi-nbcio-plus基于vue3的flowable收回任务后重新进行提交表单的处理
    150
  • 5
    ruoyi-nbcio-plus基于vue3的flowable多租户机制
    184
  • 6
    ruoyi-nbcio-plus基于vue3的flowable的消息中心我的消息的升级修改
    104
  • 7
    vue3中使用动态组件
    102
  • 8
    Vue 3 中 ＜transition-group＞ 组件报错的非 props 属性传递问题
    141
  • 9
    ruoyi-nbcio-plus基于vue3的flowable的自定义业务显示历史信息组件的升级修改
    76
  • 10
    ruoyi-nbcio-plus基于vue3的flowable的支持自定义业务流程处理页面detail.vue的升级修改
    120

    • 相关课程

    更多
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • React 入门与实战
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程
  • React 入门教程开发文档

    • 相关电子书

    更多
  • React Native 全量化实践
  • Vue.js在前端服务化上的实践与探索
  • React在大型后台管理项目中的工程实践
    • 下一篇
    DataWorks