秋来九月八

优化是当页面出现问题或者效率过低采取的手段，任何优化不是没有代价，或许需要更多的开发时间，或许可维护性可扩展性会降低。所以，不要过度优化。

hook是什么？用来监听组件生命周期的回调函数。这和生命周期函数mounted，created，updated有什么区别？区别1：@hook 会在对应的生命周期函数执行后执行。区别2：@hook 可以在父组件监听子组件的生命周期运行情况。从这段vue源代码中我们能看到hook的部分调用逻辑，其实就是在调用我们写的，@hook这个api却没有在官方文档中出现，所以鲜有人知道它的存在和用法。

详细解读 onfocus 到onblur 各个事件之间的联系和顺序

当我们在父组件中使用子组件时，可以在子组件内部使用默认插槽，将父组件中的内容插入到子组件中的特定位置。这是刚才创建好的子组件，现在在其template的模板中，加入了一个slot标签，属性name绑定为刚才中v-slot：绑定的名字，也就是slotcontent。如果需要用一句话去总结作用域插槽，那就是在父组件中访问子组件的数据，或者从数据流向的角度来讲就是将子组件的数据传递到父组件。根目录之下的是已经注册的子组件，也是需要加内容的子组件标签，必须存在。父组件想要插入子组件的内容。往指定的插槽填充内容。

react vue js原生事件，默认都是以冒泡的形式触发。事件流总是以 先捕获 从根节点 —> 祖父节点 —> 节点本身后冒泡 节点本身 —> 祖父节点 —> 根节点所有的事件都是默认冒泡触发，在捕获阶段不会触发。如果将该事件设置为捕获，那么该事件则不会在冒泡阶段触发。vue代码<div @click = "divClick"> <a href="www.baidu.com" @click="linkClick"

vue官网提供的异步操作流程如果要对state中的数据进行异步修改，就必须完整地走完这个流程简单介绍第一步在vue组件中，通过this.$dispatch(‘acitons里面的方法名’，‘要传入的参数，可以是一个对象’)调用acitons中的方法，进行异步处理第二步当actions里面的promise异步处理完成以后，在actions的方法中通过this.$commit(‘mula...

modules的使用，是为了让vuex的数据结构更加清晰，也为了方便模块化的使用，将每一个模块的数据都单独存在放modules的一个对象里面。modules: { moduleA: { state: { name: 'dx' }, actions: { test: function () { co...

在默认模式下，vuex中保存的东西会在刷新之后被清空，这是因为浏览器刷新会重新加载 JavaScript 代码，包括 Vuex 存储的数据。导致我们想用vuex存储一些状态，比如登录状态，都会受到很大的影响每种方法都有其优点和限制，你可以根据你的应用需求选择适当的方法。如果你只需要在短时间内保存一些数据，本地存储可能足够；如果需要更可靠和安全的状态管理，可能需要考虑服务器端持久化。

vuex.Store是 Vuex 的核心部分，它用于管理应用程序的状态，以及包含了一些基本属性和方法。以下是vuex.Storestatestate是 Vuex 存储应用程序状态的地方。它是一个包含所有应用状态的对象。你可以通过来访问应用程序的状态数据。gettersgetters允许你在访问状态数据之前对其进行计算或处理。它类似于计算属性，但可以被多个组件访问。getters是一个包含计算属性的对象。state: {},

安装npm install vuex --save使用方法约定俗成这样使用第一步在vue项目的src文件夹中，创建一个名为store的文件夹，

接下来做一个mutations的传参讲解添加学生的例子<template> <div> <h3>-----------------------------------这是mutations传参测试--------------------------------</h3> <div> {{this.$store.state...

vue封装textarea代码<template> <div class="paper-textarea-warpper"> <textarea class="paper-textarea" :placeholder="placeholder" :rows="4" :value="textAreaValue" :maxlength="maxlength" @input="getTextArea

vue封装的input组件代码，以供大家参考<template> <input type="text" class="input-warpper" :placeholder="placeholder" :value="inputValue" @input="getInputValue" /></template><script>export default { name: 'PaperInput',

如果你的父子组件之间在不同的路由中，你可以使用路由参数来传递数据。在父组件中触发事件，而子组件监听事件以接收数据。你可以在父组件中使用 $emit 发送自定义事件，然后在子组件中监听该事件来传递数据。子组件接收一个父组件传递过来的方法，将要传递给父组件的参数作为该方法的参数使用。父组件直接绑定在子组件的标签上，子组件通过props接收传递过来的参数。在父组件和子组件中都可以访问和修改 Vuex 存储的数据。在发送事件的组件中使用 $emit 来触发事件。在接收事件的组件中使用 $on 来监听事件。

直接访问和修改 DOM 元素的属性和内容：你可以使用 ref 来访问和修改特定 DOM 元素的属性、样式、内容等。在 Vue 中使用 ref 的主要作用是允许你访问和操作 DOM 元素或组件实例。访问子组件的实例：如果你在父组件中使用 ref 来引用子组件，你可以访问子组件的属性和方法。这使得父组件可以与子组件进行通信，调用子组件的方法或访问子组件的数据。父组件如何获取子组件中某个子组件的全部参数和方法？// 父组件调用子组件中的showPhone方法。// 父组件调用子组件中的showPhone方法。

当你业务需求，需要改变公共组件的样式时，如果公共组件使用了scoped或者module，样式将无法被覆盖。在app.vue文件中引入公共样式或者在style标签中书写公共样式时不加 scoped或者module。module模式会根据一定的规则重新生成类名称或者标记，不会出现类名重复，样式污染的问题。使用 scss（sass）或者 less 需要额外安装包和配置才可以使用。作用 加上唯一标识，本组件的样式只作用于本组件，不会污染公共样式。使用第二种方式，不能通过 - 连接，用小驼峰的方式拼接。

小程序有许多种，微信小程序、钉钉小程序、uni-app、Taro之类的。页面监视 在小程序中是有生命周期的。当你搜索小程序生命周期，就能发现 onShow 和onHide这两个方法，一共用来监视页面是否显示，一个用来监视页面是否隐藏。但有的时候，我们无法使用小程序的生命周期。比如我手中的一个项目， 使用的是vue + vant 的方式来写小程序页面，vue组件中如何检测某个组件是否显示呢通过路由？路由守卫？只要跳转到那个页面，必定会触发路由守卫里面的函数，这的确是一种方法，但总感觉有点麻烦。

创建一个共用的mixins数据<script>export default { name: 'myMixins'， data() { return { name: '这是公用的名称'， clickCount: '这是点击的次数' } }, methods: { //点击按钮记数 onClickBtn: function () { this.clickCount++ } mounted() { console.log('这是一个按钮点击计数的mixi

什么是mixins（混入）？mixins是对vue组件的一种扩展，将一些公用的常用数据或者方法，构建一个可被混入的数据结构，被不同的vue组件进行合并，就可以在不同的vue组件中使用相同的方法或者基础数据。稍微有点理解vue混入的同学，可能会感到困惑，mixins和vue的公共组件或者vuex很相似。mixins和vuex的区别。vuex公共状态管理，在一个组件被引入后，如果该组件改变了vuex里面的数据状态，其他引入vuex数据的组件也会对应修改，所有的vue组件应用的都是同一份vuex数据。（在

computed 是什么？vue框架下的计算属性，本身是函数的集合对象，函数名可以直接渲染到页面上，渲染的内容，就是函数返回的内容computed 怎么用？vue组件中，html代码部分<text class="all-money pay-child" v-text= 'allMoney + "元"'> </text>vue组件中，js部分export ...

vue.direactive 是什么？在vue框架中，我们开发者，时常使用vue自带的指令，比如v-on，v-for，v-modal等等。同样的，vue提供给开发者一些钩子，用以帮助开发者自定义vue指令，用法和v-on等是一样的。vue.direactive如何使用？//在html方面，直接在标签上绑定，但是要添加上v-<div id="app"> <!--#...

其实很简单第一步：查看vue的package.json的scripts的配置是否如下，如果不是，修改成这个样子"scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "start": "npm run dev", "lint...

vue的data中保存一些数据，用于页面的渲染。有的时候，当我们手动对data中的数据修改时，vue却监听不到这些数据的变化，导致页面没有触发新一轮的更新。注意：出现以上问题的原因在于，没有通过vue提供的方法对保存在data中的数据进行修改。强制性通过js对数据修改的那些方法，有一部分在vue中是不被认可的。vue中修改数组的方法：①变异方法（7个）:push ,shift, unshif...

watch用来监听data中已经存在的数据，如果data中没有watch监听的数据，那watch就没有存在的意义watch能够监听到的几个先决条件1 watch监听的数据，data中必须已经存在，否则没有任何意义，2 watch监听的数据，如果是数组或对象，必须通过vue提供的方法去改变它的值时才能被监听到3 watch监听的数据改变，层级不能太深，只能是一层。对象和数组改变的地方，层级不...

我们经常在vue开发项目的过程中，遇到需要对input框使用v-modal的这种情况，在有的时候，不光需要双向数据绑定，还需要在改变数据之后绑定其它的操作，那么问题来了，你是使用@change绑定事件还是使用@click绑定事件建议不要通过click绑定事件，对待input标签，最好通过change来触发，本人血的教训。<input @change="inputchecked" clas...

当使用axios做post请求时，很可能会出现跨域以笔者项目中的经历为例子我想要通过axios post请求一个接口192.168.97.218:3001/login vue中需要通过proxyTable代理来实现跨域在vue项目中config文件夹下的index.js文件，找到proxyTable对象，改成以下这样 proxyTable: {// axios跨域处理 ...

请注意，在设置之后，你需要遵循一致的缩进风格，要么使用制表符，要么使用空格，以保持代码的可读性。如果你想保持一些缩进规则，你可以设置 ‘no-tabs’: ‘warn’ 或 ‘no-tabs’: ‘error’ 来启用警告或错误级别的规则。1、打开你的项目根目录，找到 .eslintrc.js 或 .eslintrc.js 文件，这是你的 ESLint 配置文件。如果你想在 Vue 项目中禁用 ESLint 的 no-tabs 规则，你可以通过配置 ESLint 规则文件来实现。