![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
马小兜-
这个作者很懒,什么都没留下…
展开
-
Vue的computed计算属性和watch的异同
computed和watch的异同不同点:触发条件不同computed计算属性会依赖于它的data属性,只要是依赖的data属性有变动的话,则自定义重新调用计算属性执行一次watch则是在监控data属性值发生变化的时候,其余会自动调用watch回调函数执行速度不同computed计算属性的值是从缓存中获取的,而不是重新编译执行一次,因而其性能要高一些,尤其是在data属性没有发生变化的时候,而重复调用computed回调函数使用方式不同computed计算属性的回调函数方法可以直接在页面原创 2020-09-04 09:26:27 · 888 阅读 · 0 评论 -
还在纠结什么时候用v-if和v-show吗
vue中的 v-if 和 v-show 二者都可以动态的控制元素的隐藏和显示,但是他们控制的原理是不同的。v-if原理v-if控制元素显示或者隐藏是把整个dom元素整个地渲染或者删除,如果删除元素,也就是说页面中不存在这个dom元素,从而达到隐藏的效果;v-if每次切换的时候都会创建或者销毁元素,有较高的切换性能消耗v-if是惰性的,如果在初始条件为假的情况下什么也不会做,直到第一次条件为真的时候才会渲染条件块v-show原理v-show无论初始条件是什么,元素都会被渲染,也就是说dom元原创 2020-09-03 09:59:41 · 758 阅读 · 0 评论 -
vue中如何给生产环境和开发环境配置不同的baseURL
第一步: 设置不同的接口地址找到文件config/dev.env.js对开发环境下设置接口'use strict'const merge = require('webpack-merge')const prodEnv = require('./prod.env')module.exports = merge(prodEnv, { NODE_ENV: '"development"', API_ROOT: "/api/"})找到文件/config/prod.env.js给生产环境原创 2020-09-02 23:46:31 · 4097 阅读 · 0 评论 -
详解Vue.nextTick()方法
什么是Vue.nextTick()?在下次DOM更新循环结束之后执行回调函数。在修改数据之后使用这个方法获取更新之后的DOM,这是获取更新之后的DOM的Vue方法理解:将回调函数延迟到下一次DOM更新数据之后再调用,简单理解就是当数据更新了,在DOM中渲染后自动执行该函数。<template> <div class="hello"> <div> <button id="firstBtn" @click="testClick()" re原创 2020-09-01 13:27:01 · 548 阅读 · 0 评论 -
为何Vue采用异步渲染
理解:因为如果不采用异步更新,那么每次更新数据都会对当前组件进行重新渲染,所以考虑性能问题,Vue会在本轮数据更新之后,再去异步更新视图原理:首先调用dep.notify()通知watcher进行更新调用watcher的subs.update()方法将watcher去重之后放到队列当中异步清空watcher队列源码:update () { /* istanbul ignore else */ if (this.lazy) { this.dirty = tru原创 2020-08-31 08:53:21 · 473 阅读 · 0 评论 -
结合Vue谈谈MVVM的理解
一、MVCMVC是Model-View-Controller的缩写,就是模型-视图-控制器Model:后端传递的数据View:看到的页面Controller:页面的业务逻辑MVC是单向通信,即View和Model,必须通过Controller来承上启下使用MVC的目的就是将M和V分开MVC和MVVM的区别并不是VM取代了C,ViewModel存在的目的在于抽离了Controller中展示的业务逻辑,而不是替代了Controller,其他视图操作业务还是应该放在Controller中实原创 2020-08-02 11:53:11 · 1070 阅读 · 0 评论