不知名人士的博客

可以看到一共花了4秒多，其中渲染过程占了2秒，所以当元素很多想要一次性渲染完再显示页面的话，卡顿是非常明显的。这是一种比较偷懒的办法，因为对于那些使用现代浏览器的用户，他们也被迫使用了降级之后的代码，而降低的代码中包含了大量的 polyfill，从而提升了包的体积。但可能一开始要渲染的组件太多，不仅JS执行的时间很长，而且执行完后浏览器要渲染的元素过多，从而导致页面白屏。绑定一个表单项时，当用户改变表单项的状态时，也会随之改变数据。因此，如果需要，只要能保证组件的依赖数据不发生变化，组件就不会重新渲染。

🙋‍请注意，由于本人项目中引入了unplugin-auto-import的依赖，所以所有的代码示例中均未手动引入各种依赖库（ref、reactive、useRouter等等）初始环境搭建npm init vue@latest模板语法插值同 Vue2<span>Message: {{ msg }}</span>HTML同 Vue2<p>HTML Text: {{ rawHtml }}</p><p>v-html: <spa

在 i18n 下新建 lang 文件夹，下面有 en.js 和 zh.js 两个语言包，在 i18n 下的 index.js 中引入import {en : {msg : {msg : {legacy : false , // 使用了Vue3 composition API的话这项一定要为false globalInjection : true , // 全局使用 t 函数 locale , messages }) export default i18n。

目前已完成组件：图标选择器城市选择器趋势标记通知菜单表单弹窗表单未完成组件：进度条时间选择器表格源码已全部上传至Github。项目地址直接给出，直接克隆下来安装依赖即可完美运行！项目地址：点击直接跳转~注意：Github 有的时候会比较慢，有梯子的话最好，不过也要看情况放出几张图片介绍，有兴趣的朋友可以拉下来本地运行看看~也可以互相交流交流首页图标选择器城市选择器趋势标记通知菜单表单弹窗表单还有一些未完成的组件正在编写中，后续有空会同步到Gi

Vue 中 PC 端（移动端通用）如何实现滚动到底部时加载数据？

vue 中同一路由跳转由于不会重新执行生命周期，所以数据不更新。不管是动态路由，还是传参都不会刷新页面最简单最常用的方式是监听路由变化，在路由发生变化后执行一系列操作watch: { $route(to) { if (to.name === "check") { this.init() // 一般是执行你写在 mounted 下的方法 } }}...

在 Vue 项目中会发现很多情况下，操作对象中的属性，视图层不会发生变化。受 ES5 的限制，Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter，所以属性必须在 data 对象上才能让 Vue.js 转换它，才能让它是响应的。这也是 Object.defineProperty() 的一个缺点。解决方法就是使用 this.$set：this.$set(obj, key, value)其中 obj 是具体对象名，key 是对象中某个属性名

这么一个场景，假如 data 中有个 type 属性，只要这个 type 不为空，就给div添加 A、B 两个类名，否则就添加类名 C。该怎么做？<template> <div :class="[type !== '' ? 'A B' : 'C']">777</div> <!-- 是的，中间用空格隔开就行了 --></template><script>import vuedraggable from 'vuedragg

首先应明确一个有关 vue 中使用 lodash.js 的点，当我们想使用防抖（ _.debounce ）和节流（ _.throttle ）这种函数的时候：import _ from 'lodash'export default { methods: { handlerClick () { _.throttle(func, 3000) } }}这么写的话，调用 handleClick 方法后是不起效的，应改成下面的写法???? methods: { handleCl

官方文档中将代码风格指南分为了四个大类的规则，对于初学者或是使用过Vue.js一段时间的用户们提出一些Vue代码中的建议。优先级-A-的规则：必要的-规避错误组件名为多个单词组件名应该始终是多个单词的，根组件 App 以及 <transition>、<component> 之类的 Vue 内置组件除外。这样做可以避免跟现有的以及未来的 HTML 元素相冲突，因为所有的 HTML 元素名称都是单个单词的。反例：Vue.component('todo', { //

比如有这么个功能：在a页面写一个定时器，让它每秒钟打印一个1，然后跳转到b页面。但是此时定时器依然在执行，这样是非常消耗性能的。大多数人的解决方法：data() { return { picker: null // 定时器名称 }}// 使用定时器this.picker= (() => { // someting}, 1000)// 清除定时器：beforeDestroy() { clearInterval(this.picker) this.ti

关于Vuex是什么就不花大的篇幅来解释了，可以简单理解成全局的 data ，若您完全没有使用过vuex，建议先看看官方文档中对于Vuex的描述再来看本篇。关于Vuex的使用有以下需要注意的点????在store的index.js文件中定义一个name：import { createStore } from 'vuex'export default createStore({ state: { name: 'Jae' }, mutations: { }, actions:

当我们在一开始的input框输入一些内容后，点击切换按钮切换组件，再点击一次按钮回来，会发现input框中的内容没有了 😒。假设现在有这么个需求：一开始只展示子组件。，同时增加一个按钮，点击就切换成子组件。，再点击又切换回来。效果和前面是一模一样的~再点击也能切换得回去~

假设子组件 list ：<div> <div v-for="item in list" :key="item">{{ item }}</div></div>//子组件datadata() { return { list: [1, 2, 3] }}父组件中使用子组件：<list />展示效果为：123这个很好理解吧~但是如果有这么个业务需求：父组件使用子组件时不一定要使用 div ，而是有时需要使用 sp

假设子组件 layout ：<div> <div>content</div></div>父组件使用子组件：<layout></layout>页面展示效果为：content如果我想让父组件显示：headercontentfooter即：在父组件写了header与footer的div，想在中间的content部分使用子组件即可。很容易想到，使用插槽 ：//父组件<layout> <di

slot无法直接绑定事件，可在外层包一个 <span></span> 标签来解决。例如：<span @click="handleClick"> <slot></slot></span>