【VUE】使用问题记录

=====================================================================

1、Vue.nextTick 修改数据之后更新DOM

2、修改了属性,视图没有刷新,或使用了this.$forceUpdate()

3、鼠标over和out

4、MSBUILD : error MSB3428: 未能加载 Visual C++ 组件“VCBuild.exe”

5、div 滚动条滚动到最底部

6、数组对象里的图片修改后不显示

7、对象copy

8、子组件使用父组件的变量

9、监听 window.open 关闭

10、图片路径引入问题

生命周期图

=====================================================================

1、Vue.nextTick 修改数据之后更新DOM

Vue.nextTick(callback)

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。

this.$nextTick(()=>{
// todo
});

Vue.nextTick(()=>{
// todo
});

2、修改了属性,视图没有刷新,或使用了this.$forceUpdate()

如果你发现你自己需要在 Vue 中做一次强制更新,99.9% 的情况,是你在某个地方做错了事。

你可能还没有留意到数组或对象的变更检测注意事项,或者你可能依赖了一个未被 Vue 的响应式系统追踪的状态。

然而,如果你已经做到了上述的事项仍然发现在极少数的情况下需要手动强制更新,那么你可以通过 $forceUpdate 来做这件事。

引起这个问题的大部分原因是因为属性在某种情况下变为非响应式的

比如,从后台返回的对象结构中没有某个属性,或者这个属性不是在data中定义的,而是后来加的。

https://cn.vuejs.org/v2/guide/components-edge-cases.html#强制更新

对象变为非响应式

https://cn.vuejs.org/v2/guide/list.html#注意事项

对象检测

https://cn.vuejs.org/v2/guide/list.html#对象变更检测注意事项

响应式原理

https://cn.vuejs.org/v2/guide/reactivity.html#ad

添加对象属,指定属性和值

Vue.set(vm.user, 'age', 27) 或者 vm.$set(vm.user, 'age', 27)

要添加数组,指定索引和对象

let item = {
value: '10',
label: '张三'
}
this.$set(this.myArray, 1, item);

3、鼠标over和out

@mouseover="imageMouseOver(o.url)"
@mouseout="imageMouseOut(o.url)"

 4、MSBUILD : error MSB3428: 未能加载 Visual C++ 组件“VCBuild.exe”

以管理员方式运行命令提示符,全局安装windows构建工具

npm install -–global -–production windows-build-tools

5、div 滚动条滚动到最底部

this.$nextTick(function(){
let div = document.getElementById('divIdxyz');
div.scrollTop = div.scrollHeight;
})

6、数组对象里的图片修改后不显示

引起这个问题的原因是,直接把数组里原来的对象替换成了新对象,导致对象成为了非响应式对象,解决办法是不要替换对象而是修改数组中对象的属性值就可以。

7、对象copy

借助json完美实现对象copy

var a = {name: 'tom', age: 25, address: ['beijing','hangzhou']}
var b = JSON.parse(JSON.stringify(a))

8、子组件使用父组件的变量

https://cn.vuejs.org/v2/api/#provide-inject

父组件 provide 一个变量,子组件 inject 变量

// 父级组件提供 'foo'
var Provider = {
provide: {
foo: 'bar'
},
// ...
} // 子组件注入 'foo'
var Child = {
inject: ['foo'],
created () {
console.log(this.foo) // => "bar"
}
// ...
}

 9、监听 window.open 关闭

btnUpdate(row){
this.windowObject = window.open('xxxxxx');
this.loopObject = setInterval(this.waitWindowClose, 1000);//注意不能加括号
},
waitWindowClose() {
if(this.windowObject.closed) {
clearInterval(this.loopObject);
this.windowObject = undefined;
this.loopObject = undefined;
this.reloadList();
}
}

参考: https://www.cnblogs.com/jin-zhe/p/10001236.html

10、图片路径引入问题

动态引入图片。图片文件放入assets目录中

方式一 import,需要在data中注册一下

import logo from '@/assets/img/logo.png';
data() {
return {
logo,
}
}

方式二 require

data() {
return {
logo: require("@/assets/images/avatar.png"),
}
}
<img :src="logo">

鼠标划过修改图片示例

data() {
return {
mouseOutMoreImg: require('@/assets/out.png'),
mouseOverMoreImg: require('@/assets/over.png'),
waitMoreImg: require('@/assets/out.png')
}
}
method() {
waitOver() {
this.waitMoreImg = this.mouseOverMoreImg;
},
waitOut() {
this.waitMoreImg = this.mouseOutMoreImg;
}
}
<img :src="waitMoreImg" class="img" @click="handleMore" @mouseover="waitOver" @mouseout="waitOut">

======================================================================

生命周期图

【VUE】使用问题记录的更多相关文章

  1. vue.js学习记录

    vue.js学习记录 文章已同步我的github笔记https://github.com/ymblog/blog,欢迎大家加star~~ vue实例 生命周期 beforeCreate:不能访问thi ...

  2. vue 自学笔记记录

    vue 自学笔记(一): 知识内容:  安装vue ,创建vue实例,安装第一个组件,单项数据流 https://www.cnblogs.com/baili-luoyun/p/10763163.htm ...

  3. vue使用tips记录

    用vue已经很久啦,这里记录一下一些我觉得比较实用的小tips:

  4. vue 组件发布记录

    好久没做独立的 vue 组件了,最近突然想把一个常用的 vue 组件打成一个 npm 包,方便使用.好久不用,发现已经忘记环境怎么搭建.翻看以前的组件,才慢慢回想起来,中间还出现些错误.在这记录下开发 ...

  5. Vue 使用History记录上一页面的数据

    UI Mvvm 前端数据流框架精讲 Vue数据双向绑定探究 面试问题:Vuejs如何实现双向绑定 数据双向绑定的探究和实现 需求 从列表页的第二页进入详情页,返回时列表页仍然显示在第二页: 从列表页的 ...

  6. [vue折线图] 记录SpringBoot+Vue3.0折线图订单信息展示

    因公司业务需求,需要做一份订单相关的折线图, 如果其中有一天没有订单的话,这一天就是空缺的,在绘制折线图的时候是不允许的,所有要求把没有订单数据的日期也要在图表显示. 使用技术vue3.0+sprin ...

  7. vue框架-学习记录

    前段时间在做vue项目时,遇到挺多问题,想简单总结一下: 1.关于父组件,子组件的通信 网上有很多这方面的讲解,讲解也比较细致,我主要总结了自己在项目中需要的: [1]父组件-子组件 也就是" ...

  8. vue踩坑记录:[Vue warn]: $attrs is readonly.

    今天在用element-ui的DatePicker日期选择器的时候,发现每当点击一次这个组件,控制台就会报警告`[Vue warn]: $attrs is readonly`,但是也不影响实际操作效果 ...

  9. Js 框架之Vue .JS学习记录 ① 与Vue 初识

    目录 与 Vue.js 认识 VUE.JS是个啥?有啥好处? Vue 的目标 战前准备  VUE.JS环境 VUE.JS 尝试一下,你就明白 第一步 实例化VUE 对象 第二步VueAPP 调用数据 ...

  10. Vue.js简单记录

    官网:https://cn.vuejs.org/ https://cn.vuejs.org/v2/api/#methods v-bind 缩写 <!-- 完整语法 --> <a v- ...

随机推荐

  1. 在VMware通过挂载系统光盘搭建本地yum仓库

    1.首先需要有一个VMware虚拟机: 2.进去虚拟机(这里用Linux下deCentOS进行演示): 3.用root账号进行登录,否则在根目录下没有一些操作权限: 4.打开终端: 5,输入命令“cd ...

  2. .NET开发者的机遇与WebAssembly发展史(有彩蛋)

    一.唠唠WebAssembly的发展历程 目前有很多支持WebAssembly的项目,但发展最快的是Blazor,这是一个构建单页面的.NET技术,目前已经从Preview版本升级到了beta版本,微 ...

  3. .NET Core 3.0中用 Code-First 方式创建 gRPC 服务与客户端

    .NET Core love gRPC 千呼万唤的 .NET Core 3.0 终于在 9 月份正式发布,在它的众多新特性中,除了性能得到了大大提高,比较受关注的应该是 ASP.NET Core 3. ...

  4. vant-ui的van-uploader上传图片

    移动端上传图片是很常用的功能,这里使用vant-ui实现. 效果如图 上传图片的vue页面:Customer.vue html <div :class="postData.length ...

  5. Java实现AES加密解密

    之前常用两种加密算法:Base64和Md5,前者容易破解,后者不可逆. AES采用对称加密方式,破解难度非常大,在可逆的基础上,能很好的保证数据的安全性. 这里介绍Java中实现AES加密算法的加密与 ...

  6. nginx常用模块(三)

    Nginx常用模块(三) ngx_http_proxy_module模块配置(http或https协议代理) proxy_pass URL; 应用上下文:location, if in locatio ...

  7. ReactRouter中HashRouter和BrowserRouter的区别

    仅个人理解,如有不当请指正 一.从原理上 HashRouter在路径中包含了#,相当于HTML的锚点定位.(# 符号的英文叫hash,所以叫HashRouter,和散列没关系哦)) 而BrowserR ...

  8. NTP服务编译安装报错:/usr/bin/ld: cannot find –lcap

    [root@localhost local]# find / -name "*libcap.so*" [root@localhost ntp-4.2.8p13]# cd /usr/ ...

  9. Android Native Binder,在Native层与App交互数据

    Binder底层是基于C实现的,因此可以作为Native进程与App层交互数据的渠道.其应用场景为:Native Service.Hal驱动设置.应用层JNI服务等. Android 4.4引入SEA ...

  10. 第三章 学习Shader所需的数学基础(2)

    目录 1.坐标空间 1.2 坐标空间的变换 @ 1.坐标空间 我们在以前渲染流水线中就接触了坐标空间的变换.例如,在学习顶点着色器流水线阶段时,我们说过,顶点着色器的最基本功能就是把模型的顶点坐标从模 ...