【VUE】使用问题记录

【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、图片路径引入问题

11、阻止click事件冒泡

生命周期图

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

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">

 

11、阻止click事件冒泡

JS：e.stopPropagation()

VUE：

@click.stop

<el-upload class="option-image-uploader" style="position: relative;"
           :action="$store.state.common.ossUploadUrl"
           :accept="$store.state.common.imageAccepts"
           :data="{siteId: $store.state.common.siteId}"
           :show-file-list="false"
           :on-success="(response, file, fileList) => handleImageUrlSuccess(response, file, fileList, option)">
    <img v-if="option.imageUrl" :src="option.imageUrl" class="option-image">
    <i v-else class="el-icon-plus option-image-uploader-icon"></i>
    <el-button type="danger" icon="el-icon-delete" circle size="mini"
               style="position: absolute; top: 36%; left: 36%;"
               @click.stop="() => removeImageUrl(option)"></el-button>
</el-upload>

 

 

 

 

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

生命周期图