Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

vue数据更新， 视图未更新 #1

Open
pfan123 opened this issue May 19, 2017 · 5 comments
Open

vue数据更新， 视图未更新 #1

pfan123 opened this issue May 19, 2017 · 5 comments

Comments

@pfan123
Copy link
Owner

pfan123 commented May 19, 2017 •
edited
Loading

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()。这些不会改变原始数组，但总是返回一个新数组。当使用非变异方法时，可以用新数组替换旧数组：

Vue1.0 数组更新检测

Vue2.0 数组更新检测
@ClarenceC
Copy link

喔学习了.

@usairaq
Copy link

usairaq commented Jul 2, 2018

前面正常
到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)

`

@pfan123
Copy link
Owner Author

pfan123 commented Mar 26, 2019

@usairaq 项目比较老了，好多依赖包要调整，有空我修复一下

@usairaq
Copy link

usairaq commented Mar 27, 2019

@usairaq 项目比较老了，好多依赖包要调整，有空我修复一下

多谢回复，期待！

@pfan123
Copy link
Owner Author

pfan123 commented Mar 29, 2019

@usairaq 已经修复了，拉新，yarn install 一下

@ClarenceC ClarenceC mentioned this issue Oct 10, 2019
Open
@pfan123 pfan123 removed the question label Aug 28, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@pfan123 @usairaq @ClarenceC