前言说来惭愧，用 mpvue 大半年，小程序快一年了，居然还试图用 event.stopPropagation 方法阻止事件冒泡，也是有点蠢。痛定思痛，写篇博文来认真捋一捋小程序的事件系统和 mpvue 的事件代理小程序事件系统，mpvue 事件系统和 DOM 事件系统的差别从文档得知，小程序的 event 对象和 DOM 的 event 对象是不同的，我们还可以通过把两个对象的属性打印出来进行比较：// 小程序 event 对象属性（8 个）["type", "timeStamp", "target",...
Vuex是一个专门为Vue.js应用程序开发的状态管理模式。针对组件繁多交互复杂的单页面应用，Vuex提供了一种便利、准确和可预测的状态管理方式，方便组件之间的数据共享和修改。文件架构如下/module/pluginshelpers.jsindex.esm.jsindex.jsstore.jsutil.jsutil.js先从最简单的工具函数开始。find函数/*** Get the first item that pass the test* by second argument function** @param {Array} list* @param {Function} f* @return {...
这篇文章给大家带来的内容是关于浅析Vue的异步组件函数，有着相应的代码实例，有需要的朋友可以参考一下。export default new Router({routes: [{path: /live,name: live,component: () => import(@/view/live/live.vue)}] })上面的代码是很常见的router代码分割,只在代码路由为live才会去加载live.vue但这样在live.vue获取的过程将是一片空白,什么也没有,体验不好, 利用vue提供的异步组建可以解决新建一个 loadable.vue<template...
这篇文章主要介绍了关于vue的父子组件，父子组件传值和vuex的浅析，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下一、vue的父子组件之间是如何传值的？ 首先呢，需要说说的是，vue既然有双向绑定，那为何会有父子组件之间的传值问题？这个问题也简单，vue的组件会供其他的vue页面进行调用，如果数组都是双向绑定的话，那么就容易混乱了，比如a,b页面绑了一个num=10，那b，c页面又绑了num=5,那vue实例的num到底听...
这篇文章给大家介绍了Vue.js中 computed和methods不同机制，在vue.js中，methods和computed两种方式来动态当作方法使用，文中还给大家提到了computed和methods的区别，感兴趣的朋友一起看看吧在vue.js中，有methods和computed两种方式来动态当作方法来用的1.首先最明显的不同 就是调用的时候，methods要加上（）2.我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生...
这篇文章介绍的内容是关于浅析Vue.js之动态路由以及命名视图，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下动态路由 动态路由其实又可以叫做路由传参。const router = new VueRouter({routes: [ // 动态路径参数 以冒号开头{ path: /user/:id, component: User }] })形如上述形式的路径即为动态路由，冒号后是参数，可以跟多段参数，每个参数都被设置到this.$route.params中。注意/user/:id和/user/:name，当...
本文主要介绍了Vue.nextTick 的实现方法，这是一篇继event loop和MicroTask 后的vue.nextTick API实现的源码解析。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。预热，写一个sleep函数function sleep (ms) {return new Promise(resolve => setTimeout(resolve, ms) } async function oneTick (ms) {console.log(start)await sleep(ms)console.log(end) } oneTick(3000)解释下s...
前言：最近团队需要做一个分享，脚进脑子，不知如何分享。最后想着之前一直想研究一下 vue 源码，今天刚好 “借此机会” 研究一下。网上研究vue数据绑定的文章已经非常多了，但是自己写一遍，敲一遍demo和看别人的文章是完全不同的，so……搬运工来了目前数据绑定主要有以下三种实现方式：1. 脏值检查（angular.js） 轮询检测数据变化DOM事件，譬如用户输入文本，点击按钮等。( ng-click )XHR响应事件 ( $http )浏览器Locatio...
cross-envcross-env是跨平台设置和使用环境变量的脚本。 在大多数Windows命令行中在使用NODE_ENV = production设置环境变量时会报错。同样，Windows和Linux命令如何设置环境变量也有所不同。 使用 cross-env 可以设置在不同的平台上有相同的NODE_ENV参数。 使用安装npm install cross-env --save-dev package.json "scripts": {"serve": "cross-env NODE_ENV=development vue-cli-service serve --open","build": "cross-env NODE_...
使用Vue前端框架开发有些时间了，官方文档对于插件开发也有详细的介绍。最近强迫症犯了，老在想为什么Vue.use函数执行，要在Vue实例化即new Vue(options)之前。解铃还须系铃人，这个问题只能通过看源码解决，于是。。。 先看Vue.use做了什么 Vue.use = function (plugin: Function | Object) {//Vue构造函数上定义_installedPlugins 避免相同的插件注册多次const installedPlugins = (this._installedPlugins || (this._installedP...
前言 关于vue.js中的生命周期，如果不是有特别的需求，一般在项目开发过程中更多的使用created和mounted， 所以在本文中主要讲解created与mounted在开发中的主要使用区别。 关于完整的生命周期，不久会在另一篇文章中做整体的理解，包括activated、destroyed等，不过可能会有点晚，大家可以留意一下版本信息： 系统:win10Vue:2.5.2webpack:3.6.0npm:6.9.0node:10.15.3生命周期完整的生命周期图示为了避免占用板块，这里就不贴出来了...
一.框架的定位 框架通常只是一种设计模式的实现，它并不意味着你可以在开发中避免所有分层设计工作。 SPA 框架几乎都是基于 MVC 或 MVVM 设计模式而建立起来的，这些模式都只是宏观的分层设计，当代码量开始随着项目增大而增多时，问题就会越来越多。许多企业内部的项目仍然在使用 angularjs1.X ，你会发现许多 controller 的体积大到令人发指，稍有经验的团队会利用好 angularjs1 构建的 controller , service , filter 以及路由和...
Vue中有两个较为高级的静态方法mixin和extend，接下来我们来讨论下关于他们各自的原理和使用场景。 Mixin： 原理： 先来看看官网的介绍： 参数：{Object} mixin 用法： 混入也可以进行全局注册。使用时格外小心！一旦使用全局混入，它将影响每一个之后创建的 Vue 实例。使用恰当时，这可以用来为自定义选项注入处理逻辑。 // 为自定义的选项 myOption 注入一个处理器。Vue.mixin({created: function () {var myOption = this.$opti...
官网的示例 var vm = new Vue({el: #example,data: {message: Hello} });项目中的写法 data() {return {message: Hello}}为什么要把data变成函数并return属性呢？ 组件是一个可复用的实例，当你引用一个组件的时候，组件里的data是一个普通的对象，所有用到这个组件的都引用的同一个data，就会造成数据污染。 将data封装成函数后，在实例化组件的时候，我们只是调用了data函数生成的数据副本，避免了数据污染。 PS：下面看下vue中d...
当前版本: 3.0.3类目录: src/history/base.js 前言:对于vue-router来说，有三种路由模式history,hash,abstract, abstract是运行在没有window的环境下的，这三种模式都是继承于history类，history实现了一些共用的方法，对于一开始看vue-router源码来说，可以从这里开始看起。 初始属性router: Router; 表示VueRouter实例。实例化History类时的第一个参数base: string; 表示基路径。会用normalizeBase进行规范化。实例化History类时...