front-end-navigator
front-end-navigator copied to clipboard
pfan123
vue数据更新， 视图未更新
vue数据更新， 视图未更新
在使用 vue 过程中，可能经常有遇到 vm.items[i] = xxx 修改数据model之后，视图未更新重新渲染问题，基于这个问题：
Vue.js 不能检测到下面数组变化：
-
1.直接用索引设置元素，如 vm.items[indexOfItem] = newValue；
-
2.修改数据的长度，如 vm.items.length = newLength。
Vue.js 1.0
为了以上问题， 扩展了观察数组，为它添加了 $set() 和 $remove() 方法：
$set() 方法
// 与 `example1.items[0] = ...` 相同，但是能触发视图更新
example1.items.$set(0, { childMsg: 'Changed!'})
$remove() 方法， 用于从目标数组中查找并删除元素，在内部它调用 splice()， 那么：
var index = this.items.indexOf(item)
if (index !== -1) {
this.items.splice(index, 1)
}
//以上代码可以用这行替换
this.items.$remove(item)
Vue.js 2.0
1.解决第一种情况
// Vue.set
Vue.set(example1.items, indexOfItem, newValue)
// Array.prototype.splice`
example1.items.splice(indexOfItem, 1, newValue)
2.解决第二种情况直接使用 splice
example1.items.splice(newLength)
Vue.js 对于数组变动检测，还包装了被观察数组的变异方法。
数组变动检测
变异方法
Vue.js 包装了被观察数组的变异方法，故它们能触发视图更新。被包装的方法有：
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
小知识： 其实是改变原有数组，整体变为改变属性变更。
重塑数组
变异方法(mutation method)，顾名思义，会改变被这些方法调用的原始数组。相比之下，也有非变异(non-mutating method)方法，例如： filter(), concat(), slice()。这些不会改变原始数组，但总是返回一个新数组。当使用非变异方法时，可以用新数组替换旧数组：
前面正常 到npm run prod 出错 插这里请教一下 可能是哪里的问题？
错误如下 `ERROR in Error: Child compilation failed: Module build failed: TypeError: options.name is not a function
-
htmlminifier.js:962 Object.start [front-end-navigator]/[html-minifier]/src/htmlminifier.js:962:21
-
htmlparser.js:376 handleStartTag [front-end-navigator]/[html-minifier]/src/htmlparser.js:376:15
-
htmlparser.js:181 new HTMLParser [front-end-navigator]/[html-minifier]/src/htmlparser.js:181:11
-
htmlminifier.js:951 minify [front-end-navigator]/[html-minifier]/src/htmlminifier.js:951:3
-
htmlminifier.js:1312 Object.exports.minify [front-end-navigator]/[html-minifier]/src/htmlminifier.js:1312:16
-
TypeError: options.name is not a function
-
compiler.js:76 [front-end-navigator]/[html-webpack-plugin]/lib/compiler.js:76:16
-
Compiler.js:300 compile [front-end-navigator]/[webpack]/lib/Compiler.js:300:11
-
Compiler.js:510 applyPluginsAsync.err [front-end-navigator]/[webpack]/lib/Compiler.js:510:14
-
Tapable.js:202 next [front-end-navigator]/[tapable]/lib/Tapable.js:202:11
-
CachePlugin.js:78 Compiler.
[front-end-navigator]/[webpack]/lib/CachePlugin.js:78:5 -
Tapable.js:206 Compiler.applyPluginsAsyncSeries [front-end-navigator]/[tapable]/lib/Tapable.js:206:13
-
Compiler.js:507 compilation.seal.err [front-end-navigator]/[webpack]/lib/Compiler.js:507:11
-
Tapable.js:195 Compilation.applyPluginsAsyncSeries [front-end-navigator]/[tapable]/lib/Tapable.js:195:46
-
Compilation.js:683 applyPluginsAsync.err [front-end-navigator]/[webpack]/lib/Compilation.js:683:19
-
Tapable.js:195 Compilation.applyPluginsAsyncSeries [front-end-navigator]/[tapable]/lib/Tapable.js:195:46
-
Compilation.js:674 applyPluginsAsync.err [front-end-navigator]/[webpack]/lib/Compilation.js:674:11
-
Tapable.js:202 next [front-end-navigator]/[tapable]/lib/Tapable.js:202:11
-
index.js:81 Compilation.
[front-end-navigator]/[webpack-uglify-parallel]/index.js:81:5 -
Tapable.js:206 Compilation.applyPluginsAsyncSeries [front-end-navigator]/[tapable]/lib/Tapable.js:206:13
-
Compilation.js:669 applyPluginsAsync.err [front-end-navigator]/[webpack]/lib/Compilation.js:669:10
-
Tapable.js:195 Compilation.applyPluginsAsyncSeries [front-end-navigator]/[tapable]/lib/Tapable.js:195:46
ERROR in Error: Child compilation failed: Module build failed: TypeError: options.name is not a function
-
htmlminifier.js:962 Object.start [front-end-navigator]/[html-minifier]/src/htmlminifier.js:962:21
-
htmlparser.js:376 handleStartTag [front-end-navigator]/[html-minifier]/src/htmlparser.js:376:15
-
htmlparser.js:181 new HTMLParser [front-end-navigator]/[html-minifier]/src/htmlparser.js:181:11
-
htmlminifier.js:951 minify [front-end-navigator]/[html-minifier]/src/htmlminifier.js:951:3
-
htmlminifier.js:1312 Object.exports.minify [front-end-navigator]/[html-minifier]/src/htmlminifier.js:1312:16
-
TypeError: options.name is not a function
-
compiler.js:76 [front-end-navigator]/[html-webpack-plugin]/lib/compiler.js:76:16
-
Compiler.js:300 compile [front-end-navigator]/[webpack]/lib/Compiler.js:300:11
-
Compiler.js:510 applyPluginsAsync.err [front-end-navigator]/[webpack]/lib/Compiler.js:510:14
-
Tapable.js:202 next [front-end-navigator]/[tapable]/lib/Tapable.js:202:11
-
CachePlugin.js:78 Compiler.
[front-end-navigator]/[webpack]/lib/CachePlugin.js:78:5 -
Tapable.js:206 Compiler.applyPluginsAsyncSeries [front-end-navigator]/[tapable]/lib/Tapable.js:206:13
-
Compiler.js:507 compilation.seal.err [front-end-navigator]/[webpack]/lib/Compiler.js:507:11
-
Tapable.js:195 Compilation.applyPluginsAsyncSeries [front-end-navigator]/[tapable]/lib/Tapable.js:195:46
-
Compilation.js:683 applyPluginsAsync.err [front-end-navigator]/[webpack]/lib/Compilation.js:683:19
-
Tapable.js:195 Compilation.applyPluginsAsyncSeries [front-end-navigator]/[tapable]/lib/Tapable.js:195:46
-
Compilation.js:674 applyPluginsAsync.err [front-end-navigator]/[webpack]/lib/Compilation.js:674:11
-
Tapable.js:202 next [front-end-navigator]/[tapable]/lib/Tapable.js:202:11
-
index.js:81 Compilation.
[front-end-navigator]/[webpack-uglify-parallel]/index.js:81:5 -
Tapable.js:206 Compilation.applyPluginsAsyncSeries [front-end-navigator]/[tapable]/lib/Tapable.js:206:13
-
Compilation.js:669 applyPluginsAsync.err [front-end-navigator]/[webpack]/lib/Compilation.js:669:10
-
Tapable.js:195 Compilation.applyPluginsAsyncSeries [front-end-navigator]/[tapable]/lib/Tapable.js:195:46
Child html-webpack-plugin for "index.html": 1 asset [./node_modules/html-webpack-plugin/lib/loader.js!./app/doc/index.html] ./node_modules/html-webpack-plugin/lib/loader.js!./app/doc/index.html 747 bytes {0} [built] [failed] [1 error]
ERROR in ./node_modules/html-webpack-plugin/lib/loader.js!./app/doc/index.html
Module build failed: TypeError: options.name is not a function
at Object.start (/data/wwwroot/front-end-navigator/node_modules/html-minifier/src/htmlminifier.js:962:21)
at handleStartTag (/data/wwwroot/front-end-navigator/node_modules/html-minifier/src/htmlparser.js:376:15)
at new HTMLParser (/data/wwwroot/front-end-navigator/node_modules/html-minifier/src/htmlparser.js:181:11)
at minify (/data/wwwroot/front-end-navigator/node_modules/html-minifier/src/htmlminifier.js:951:3)
at Object.exports.minify (/data/wwwroot/front-end-navigator/node_modules/html-minifier/src/htmlminifier.js:1312:16)
at Object.module.exports (/data/wwwroot/front-end-navigator/node_modules/html-loader/index.js:119:26)
Child html-webpack-plugin for "admin.html": 1 asset [./node_modules/html-webpack-plugin/lib/loader.js!./app/doc/admin.html] ./node_modules/html-webpack-plugin/lib/loader.js!./app/doc/admin.html 747 bytes {0} [built] [failed] [1 error]
ERROR in ./node_modules/html-webpack-plugin/lib/loader.js!./app/doc/admin.html
Module build failed: TypeError: options.name is not a function
at Object.start (/data/wwwroot/front-end-navigator/node_modules/html-minifier/src/htmlminifier.js:962:21)
at handleStartTag (/data/wwwroot/front-end-navigator/node_modules/html-minifier/src/htmlparser.js:376:15)
at new HTMLParser (/data/wwwroot/front-end-navigator/node_modules/html-minifier/src/htmlparser.js:181:11)
at minify (/data/wwwroot/front-end-navigator/node_modules/html-minifier/src/htmlminifier.js:951:3)
at Object.exports.minify (/data/wwwroot/front-end-navigator/node_modules/html-minifier/src/htmlminifier.js:1312:16)
at Object.module.exports (/data/wwwroot/front-end-navigator/node_modules/html-loader/index.js:119:26)
`
