分类 全视眼镜商城 下的文章

Vue中数据更新而界面不更新的怪异问题(Vue中$set的使用)


一、问题描述

是否有遇到过,数据更新后,界面并没更新的现象?排除数据请求时的先后问题,这是怎么回事呢?

基本的问题就是当vue的data里边声明或者已经赋值过的对象或者数组(数组里边的值是对象)时,向对象中添加新的属性,如果更新此属性的值,是不会更新视图的。

二、问题分析

如果在实例创建之后添加新的属性到实例上,它不会触发视图更新。

受 JavaScript 的限制 (以及废弃 Object.observe),Vue 不能检测到对象属性的添加或删除。

由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程,所以属性必须在 data 对象上存在才能让 Vue 转换它,这样才能让它是响应的。


元素动态计算技巧


一、概述

在项目中,经常也都会遇到宽度或高度需要动态计算的。即当获取到数据之后,等待数据渲染完成,接着就需要动态设置外层盒子的宽度或高度来达到预期效果。而添加设置的时候,这就会遇到各种问题。

二、元素的获取

在Vue中想要获取到页面中某个元素或组件,怎么办?

通过vm.$refs对象,就可以获取到持有注册过 ref 特性 的所有 DOM 元素和组件实例。


Vuex状态管理


一、什么是Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

二、为什么要使用Vuex

  • 场景一
    对于页面中,多层级嵌套组件是非常常见的,例如A组件嵌套B组件,B组件嵌套C组件,想要从C组件传递参数到A组件怎么办?

    1、C组件先通过自定义事件方式,将数据传到B组件【子组件传递参数到父组件】
    2、接着在B组件中通过自定义事件方式,将数据传递到A组件【子组件传递参数到父组件】

Snip20190520_77.png



商品详情页(过渡效果)


一、概述

Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。但有时候并不能满足我们现有需求时,这时候自定义进入、离开和列表的过渡效果。

二、transition组件

Vue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组件添加进入/离开过渡。

# 适合的场景
- 条件渲染 (使用 v-if)
- 条件展示 (使用 v-show)
- 动态组件
- 组件根节点