前端精髓

当在编写 Vue 项目的时候，很容易把一个组件写得非常大，比如写出下面这样的代码。当代码逻辑变得复杂，就很容易写出一座 shi 山，项目维护变得困难，那我们应该如果关注分离点呢？抽取组合式函数不仅是为了复用，也是为了代码组织。随着组件复杂度的增高，你可能会最终发现组件多得难以查询和理解。组合式 API 会给予你足够的灵活性，让你可以基于逻辑问题将组件代码拆分成更小的函数：在某种程度上，你可以将这些提取出的组合式函数看作是可以相互通信的组件范围内的服务。在 Vue 应用的概念中，“组合式函数”是一个利用

export function mountComponent ( vm: Component, el: ?Element, hydrating?: boolean): Component { vm.$el = el if (!vm.$options.render) { vm.$options.render = createEmptyVNode if (process.env.NODE_ENV !== 'production') { /* istanbul i

vue 没有内置支持防抖和节流，但可以使用 Lodash 等库来实现。如果某个组件仅使用一次，可以在 methods 中直接应用防抖：<script src="https://unpkg.com/lodash@4.17.20/lodash.min.js"></script><script> Vue.createApp({ methods: { // 用 Lodash 的防抖函数 click: _.debounce(function

非 Prop 的属性说的是不带冒号的属性，比如常见的示例包括 class、style 和 id 属性。当组件返回单个根节点时，非 prop 属性将自动添加到根节点的属性中。例如，在 <date-picker> 组件的实例中：app.component('date-picker', { template: ` <div class="date-picker"> <input type="datetime" /> </div>

在 Vue 3 中，组件现在正式支持多根节点组件，即片段！在 2.x 中，不支持多根组件，当用户意外创建多根组件时会发出警告，因此，为了修复此错误，许多组件被包装在一个 <div> 中。<!-- Layout.vue --><template> <div> <header>...</header> <main>...</main> <footer>...</fo

filters过滤器已从Vue 3.0中删除，不再支持。2.x 语法在2.x中，开发人员可以使用过滤器来处理常见的文本格式。<template> <h1>Bank Account Balance</h1> <p>{{ accountBalance | currencyUSD }}</p></template><script> export default { props: { a.

$on、$off 和 $once 实例方法被删除。实例上不再实现这三个事件接口（核心就是事件触发与事件监听器功能的封装）。2.x 语法在2.x中，Vue 实例可以用事件API（$on、$off 和 $once）强制附加的处理代码逻辑。这用于创建监听器功能，以创建在整个应用程序中使用的全局事件监听器：// eventHub.jsconst eventHub = new Vue()export default eventHub// ChildComponent.vueimport even.

仓库地址：GitHub文档地址：连接@vue/composition-apivue3.0为了更好的类型推断，（避免使用装饰器），完全使用普通函数，用TS重写了源码，所以在如果你使用Vue3.0开发，最好和TS搭配使用。数据通信之前使用高阶组件（会导致没有更新的组件也进行重新渲染），mixin（变量名会和组件内部冲突）,作用域插槽（会导致数据来源不明确）@vue/composition-a...

如果只想在 state 更改时重新计算某些数据，比如搜索框案例。vue<template> <div> <input type="text" v-model="filterText"> <ul> <li v-for="item in filteredList" :key="item.id"> ...

vue将 <slot> 元素作为承载分发内容的出口// layout.vue<div class="container"> <main> <slot></slot> </main></div>当组件渲染的时候，<slot></slot> 将会被替换该组件起始标签和...

Vuex全局的状态统一管理，解决组件之间状态共享和数据通信的问题。store.jsimport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex) // 使用插件export default new Vuex.Store({ state: { }, mutations: { }, actions: { }...

常常页面中都有个回到顶部的按钮，点击可以让页面滚动到顶部部位。想这种操作DOM的元素适合封装成一个指令，使用也比较简单，比如这样：<span v-back="50"> top</span>这段代码表示滚动到顶部距离50像素的位置。像指令一般会通过Vue插件的形式来注册到页面中，因为插件可以传递一些参数。import VBack from 'v-back'...

ue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。当你有一些数据需要随着其它数据变动而变动时，你很容易滥用 watch

我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。

组件的 `slot` 由调用它的父组件提供，这意味着所有事件都应该与父组件相关联。尝试去倾听这些变化意味着你的父子组件是紧密耦合的，可以使用 `$parent` 来操作。

替换数组： 例如：filter(), concat() 和 slice() 。这些不会改变原始数组，但总是返回一个新数组。可以用新数组替换旧数组，你可能认为这将导致 Vue 丢弃现有 DOM 并重新渲染整个列表。

Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。当你有一些数据需要随着其它数据变动而变动时，你很容易滥用 watch，然而，通常更好的做法是使用计算属性而不是命令式的 watch 回调。

自定义事件也可以用于创建支持` v-model` 的自定义输入组件。

Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML。然而在一些场景中，你真的需要 JavaScript 的完全编程的能力，这时你可以用 render 函数，它比 template 更接近编译器。

在 2.5.0 及以上版本中，如果你使用了单文件组件，那么基于模板的函数式组件可以这样声明：

标记组件为 functional，这意味它是无状态 (没有响应式数据)，无实例 (没有 this 上下文)。

建议不要在与v-for相同的元素上使用v-if。因为v-for指令的优先级高于v-if当它们处于同一节点。v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。

一般组件我们会有全屏组件，或是在页面的某个部分显示组件，所以路由的第一层一般是全屏显示的，而在/目录下的组件为页面的某个部分显示的，通常需求是这样的，登录是全屏显示的，而普通页面是在页面的某个部分进行切换的。import Vue from 'vue'import Router from 'vue-router'import Home from './views/Home.vue'impor...

Vue 实现了一套内容分发的 API

单向数据流：父级 prop 的更新会向下流动到子组件中，每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值

指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。事实上，指令相当不灵活，不能做一些复杂的操作。例如，指令不能触发事件。那么怎么解决这一问题呢？答案是使用抽象组件！

写在前面vue的声明周期就是从vue的实例创建到vue实例销毁的一个过程。在不同的声明周期中我们可以执行一些操作，下面简单介绍一下。经历过程首先是new Vue({})初始化实例的时候会初始化事件和声明周期，初始化完成会调用声明周期钩子函数beforeCreate。 下一步才是注入和添加响应，等完成后会调用created，这个时候可以往data里面添加一些数据，通常会在这个时候...