前言
Vue数组更新后，页面上没有动态刷新问题，在看这个问题之前，我们首先来了解下Vue数据响应式的原理。

Vue数据响应式的原理：
通过ES5的保护对象的Object.defineProperty中的访问器属性中的get和set方法，data中声明的属性都被添加了访问器属性，当读取data中的数据时，自动调用get方法；当修改data中的数据时，自动调用set方法。检测到数据变化，会通知观察者，观察者自动触发重新渲染组件。

开发中发现，通过数组索引赋值时，数据更新了，但视图并未刷新，还是显示的旧的值。

即通过以下索引方式赋值：

result[0][0] = 1;

如果多个项目要发布至同一个域名下，或Vue项目要加项目名访问时，则可以通过域名后加统一前缀来区分及路由至指定的服务，例如同一域名下：
站点A：https://www.abc.com
站点B：https://www.abc.com/bbb
站点B-接口API：https://www.abc.com/bbb/api

Vue项目访问路径加统一前缀步骤：
（1）给静态资源加前缀
vue.config.js文件 新增属性：publicPath: "/business-admin/"

例如下所示（生产环境加/admin/前缀，否则不加）：

module.exports = {
  // 如果你的应用被部署在 https://www.xxx.com/admin/，则设置publicPath为 /admin/
  publicPath: process.env.NODE_ENV === "production" ? "/admin/" : "/",
  // build生成文件的目录名称（默认dist）
  outputDir: 'dist',
  // 用于放置生成的静态资源 (js、css、img、fonts) 
  assetsDir: 'static',
  ...
}

官方参考文档：
https://cli.vuejs.org/zh/config/#publicpath

使用说明

js-pinyin安装：
npm install js-pinyin --save

页面引用：
let pinyin = require('js-pinyin');
pinyin.setOptions({checkPolyphone: false, charCase: 1});

方法调用：

console.log(pinyin.getFullChars('管理员')); // guanliyuan  
console.log(pinyin.getCamelChars('管理员')); // gly
console.log(pinyin.getCamelChars('1234'));  // 1234
console.log(pinyin.getCamelChars('english')); // english

setOptions方法参数设置：
charCase参数： 输出拼音的大小写模式，0-首字母大写；1-全小写；2-全大写
checkPolyphone：是否检查多音字

前言

在Vue页面中使用js修改元素样式同在普通Html页面，首先也是定位元素，然后直接修改元素样式。

使用原生js获取dom元素

1、通过id定位元素

<div id="leftmenu" @click="toggleMenuList" class="left-menu">

2、使用原生js修改样式：

document.getElementById("leftmenu").style.width = '200px';
document.getElementById("leftmenu").style.cssText='width: 450px; border: 1px solid #eee;';

使用ref获取dom元素

nodejs安装步骤

nodejs官网：
https://nodejs.org/

nodejs下载地址：
https://nodejs.org/en/download

如下图示，根据系统类型选择对应版本下载即可：

nodejs-download.png