对 vuejs 这个前端框架如何看?
· Ruby China
在移动前端方面经验浅薄，这里抛砖引玉，来看看大家对vuejs的看法和意见。
昨天刚看到这个框架，和angular，ember相比，突出了极简单的理念。
我看到touch和gesture方面的，也有相关的支持。
作者是一个华人，看上去很酷。
Github 链接
angular看了一会文档，对那些概念实在有点头痛，学习成本高。
何况，如果只是一些简单的应用，非要套上angular哪些模式，对以后发展和维护也是头痛的。
angular 网站主站已经被墙。
@元芳， VUEJS 这个框架你如何看？
看着挺有趣的，有空研究看看。
看着挺不错的样子呀
国内也有一个叫avalon的mvvm框架，主要是支持ie6和修正angular在dirty check上面的性能缺陷（现在不知道修复没）
vuejs不知道有什么让人眼前一亮的东西，如果是主打框架概念的话，都是mvvm差距应该不会太多
不过如果让我从中选一个的话还是angular，毕竟用户量摆在那里，1.x的生态圈也开始完善了
也是用来做数据绑定的么?
最近在用vue来做个个人的小项目，说说感受！ angularJS之前看过，不是我喜欢的类型。reactjs简单，容易上手，但是很多时候代码量太大，必要的时候每个 dom都需要抽象成一个组件，做比较复杂的UI的时候，开发复杂性较高。 Vue 综合了前面两者的有点，代码量适中，开发效率高。尤其配置loader和 webpack之后，前端产出的利器。
我用的1.x版本，下面说说缺点。 文档还是不错的，但是还是有各别地方说的不清楚，所以踩到的坑要自己填，自己总结。
另外Chrome上的那个Debuger应该是有bug的，有时候会假死。因为本人不是纯粹的JSer 所以没有深入研究Vue的源码。 所以单纯从使用者的角度上来说，还是不错的。
另外有个小建议，现在很多的mvvm都是数据驱动UI，所以某种程度上弱化了dom的概念。所以框架本身多dom的操作能力有限。 建议配置jquery使用。 不为别的，就为各个浏览器的兼容性....当然你可以选择自己做，如果你有信心比Jquery做到更好。
补充一句，在你熟悉了vue之后，一两天之内，重写bootstrap里面的js组件，应该是易如反掌的。
后方可回复, 如果你还没有账号请点击这里 。
共收到 6 条回复深入响应式原理
大部分的基础内容我们已经讲到了，现在讲点底层内容。Vue.js 最显著的一个功能是响应系统 —— 模型只是普通对象，修改它则更新视图。这让状态管理非常简单且直观，不过理解它的原理也很重要，可以避免一些常见问题。下面我们开始深挖 Vue.js 响应系统的底层细节。
如何追踪变化把一个普通对象传给 Vue 实例作为它的 data 选项，Vue.js 将遍历它的属性，用
将它们转为 getter/setter。这是 ES5 特性，不能打补丁实现，这便是为什么 Vue.js 不支持 IE8 及更低版本。
用户看不到 getter/setters，但是在内部它们让 Vue.js 追踪依赖，在属性被访问和修改时通知变化。一个问题是在浏览器控制台打印数据对象时 getter/setter 的格式化不同，使用 vm.$log() 实例方法可以得到更友好的输出。
模板中每个指令/数据绑定都有一个对应的 watcher 对象，在计算过程中它把属性记录为依赖。之后当依赖的 setter 被调用时，会触发 watcher 重新计算 ，也就会导致它的关联指令更新 DOM。
变化检测问题受 ES5 的限制，Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter，所以属性必须在 data 对象上才能让 Vue.js 转换它，才能让它是响应的。例如：
var data = { a: 1 }var vm = new Vue({
data: data})vm.b = 2data.b = 2
不过，有办法在实例创建之后添加属性并且让它是响应的。
对于 Vue 实例，可以使用 $set(key, value) 实例方法：
vm.$set('b', 2)
对于普通数据对象，可以使用全局方法 Vue.set(object, key, value)：
Vue.set(data, 'c', 3)
有时你想向已有对象上添加一些属性，例如使用 Object.assign() 或 _.extend() 添加属性。但是，添加到对象上的新属性不会触发更新。这时可以创建一个新的对象，包含原对象的属性和新的属性：
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })
也有一些数组相关的问题，之前已经在中讲过。
初始化数据尽管 Vue.js 提供了 API 动态地添加响应属性，还是推荐在 data 对象上声明所有的响应属性。
不这么做：
var vm = new Vue({
template: '&div&{{msg}}&/div&'})vm.$set('msg', 'Hello!')
var vm = new Vue({
data: {
template: '&div&{{msg}}&/div&'})vm.msg = 'Hello!'
这么做有两个原因：
data 对象就像组件状态的模式（schema）。在它上面声明所有的属性让组件代码更易于理解。
添加一个顶级响应属性会强制所有的 watcher 重新计算，因为它之前不存在，没有 watcher 追踪它。这么做性能通常是可以接受的（特别是对比 Angular 的脏检查），但是可以在初始化时避免。
异步更新队列Vue.js 默认异步更新 DOM。每当观察到数据变化时，Vue 就开始一个队列，将同一事件循环内所有的数据变化缓存起来。如果一个 watcher 被多次触发，只会推入一次到队列中。等到下一次事件循环，Vue 将清空队列，只进行必要的 DOM 更新。在内部异步队列优先使用 MutationObserver，如果不支持则使用 setTimeout(fn, 0)。
例如，设置了 vm.someData = 'new value'，DOM 不会立即更新，而是在下一次事件循环清空队列时更新。我们基本不用关心这个过程，但是如果想在 DOM 状态更新后做点什么，这会有帮助。尽管 Vue.js 鼓励开发者沿着数据驱动的思路，避免直接修改 DOM，但是有时确实要这么做。为了在数据变化之后等待 Vue.js 完成更新 DOM，可以在数据变化之后立即使用 Vue.nextTick(callback) 。回调在 DOM 更新完成后调用。例如：
id="example"&{{msg}}&
var vm = new Vue({
el: '#example',
data: {
msg: '123'
}})vm.msg = 'new message' vm.$el.textContent === 'new message' Vue.nextTick(function () {
vm.$el.textContent === 'new message' })
vm.$nextTick() 这个实例方法比较方便，因为它不需要全局 Vue，它的回调的 this 自动绑定到当前 Vue 实例：
ponent('example', {
template: '&span&{{msg}}&/span&',
data: function () {
return {
msg: 'not updated'
methods: {
updateMessage: function () {
this.msg = 'updated'
console.log(this.$el.textContent)
this.$nextTick(function () {
console.log(this.$el.textContent)
}})
计算属性的奥秘你应该注意到 Vue.js 的计算属性不是简单的 getter。计算属性持续追踪它的响应依赖。在计算一个计算属性时，Vue.js 更新它的依赖列表并缓存结果，只有当其中一个依赖发生了变化，缓存的结果才无效。因此，只要依赖不发生变化，访问计算属性会直接返回缓存的结果，而不是调用 getter。
为什么要缓存呢？假设我们有一个高耗计算属性 A，它要遍历一个巨型数组并做大量的计算。然后，可能有其它的计算属性依赖 A。如果没有缓存，我们将调用 A 的 getter 许多次，超过必要次数。
由于计算属性被缓存了，在访问它时 getter 不总是被调用。考虑下例：
var vm = new Vue({
data: {
computed: {
example: function () {
return Date.now() + this.msg
}})
计算属性 example 只有一个依赖：vm.msg。Date.now() 不是 响应依赖，因为它跟 Vue 的数据观察系统无关。因而，在访问 vm.example 时将发现时间戳不变，除非 vm.msg 变了。
有时希望 getter 不改变原有的行为，每次访问 vm.example 时都调用 getter。这时可以为指定的计算属性关闭缓存：
computed: {
example: {
cache: false,
get: function () {
return Date.now() + this.msg
}}
现在每次访问 vm.example 时，时间戳都是新的。但是，只是在 JavaScript 中访问是这样的；数据绑定仍是依赖驱动的。如果在模块中这样绑定计算属性 {{example}}，只有响应依赖发生变化时才更新 DOM。1656人阅读
最近在写一个项目，然后由于采用的前后端分离传递数据，页面的渲染由前端来完成，于是就想说试一下vuejs，因为实在是不想用jq的dom操作，jq的dom操作对于页面的节点增加和删除，我感觉还好。但是用于表单的渲染，确实要不断地获取dom，并对节点进行更改操作，确实很复杂。
说一下项目背景
是做一个助管工资录入系统，我为什么接了这个活儿了呢，因为是采用前后端分离，感觉能学到很多东西。没错，又只有我一个前端，美工的活儿也一块儿干了，唉~。
然后就想学习一下最近很火的MVVM框架。
之前想用angularjs，后来放弃了，因为angularjs实在是有点笨重，是google研发的吧，读API还要经过脑子翻译一下。
于是用了Vue，Vue是国内团队开发的框架，很轻量，目前很多公司也在用这个框架。
因为我这个项目不大，所以也就不用webpack什么的呢，直接下载了vue.js就可以开始写代码了。
最开始是要绑定一个div内容
&div id="main-data"&
el: '#main-data',
vue的双向绑定
以下是本项目的一点儿代码
class="panel panel-default"&
class="panel-heading"&已添加信息&
class="panel-body"&
class="table table-bordered mt-10"&
&所在单位&
&银行卡号&
&联系电话&
&申请年月&
&申请金额&
v-for="item in items" track-by="$index"&
&{{item.stuID}}&
&{{item.name}}&
&{{item.szdw}}&
&{{item.ks}}&
&{{item.creditNum}}&
&{{item.tel}}&
&{{item.helpDate}}&
&{{item.money}}&
&{{item.status}}&
class="btn btn-default" v-on:click="submitData"&提交&
js文件部分是这样的
var table = new Vue({
el: '#main-data',
items: [],
new_item: '',
message: 'message',
query: '',
methods: {
showData: function() {
var _self = this;
$.getJSON("../json/data.json", function(result) {
_self.items =
console.log(_self.message);
join: function() {
var _self = this;
_self.new_item.helpDate = _self.temp.helpD
_self.new_item.money = _self.temp.
_self.items.push(_self.new_item);
一旦有item提交进来，接回push进入items，这样子页面就会自动更新。
以下是生成的代码。
Vue的属性绑定和事件绑定
vue的事件绑定和属性绑定也特别简单
&div class="modal-content"&
&div class="modal-header"&
&button type="button" class="close" data-dismiss="modal" aria-hidden="true"&×&/button&
&h4 class="modal-title" id="myModalLabel"&申请&/h4&
&div class="modal-body"&
&label for=""&年月：&/label&
&input v-model="temp.helpDate" type="text" class="form-control" placeholder=""&
&label for=""&薪资：&/label&
&input v-model="temp.money" type="text" class="form-control" placeholder=""&
&div class="modal-footer"&
&button type="button" class="btn btn-default" data-dismiss="modal"&关闭&/button&
&button type="button" v-on:click="join" class="btn btn-primary"&提交更改&/button&
这里的button（提交更改）就用到了事件绑定，绑定了额join方法
v-on:click="join"
join方法就写在vue的methods里面
依然是上面的例子
&label for=""&年月：&/label&
&input v-model="temp.helpDate" type="text" class="form-control" placeholder=""&
&label for=""&薪资：&/label&
&input v-model="temp.money" type="text" class="form-control" placeholder=""&
在每个input上面写了 v-model=“”
这样input的value就绑定到了temp上面，temp是在Vue 的data中声明的。
与Ajax联合使用，用了这么久还是离不开jq里的ajax，实在是太好用了
向服务器请求数据，绑定在自己的data中，并显示在页面。
showData: function() {
var _self = this;
$.getJSON("../json/data.json", function(result) {
_self.items =
console.log(_self.message);
这里以json提交数据
type: "POST",
contentType: "application/ charset=utf-8",
data: JSON.stringify(_self_query),
dataType: "json",
success: function(result) {
_self.new_item =
error: function(message) {
alert("提交数据失败！");
目前项目还在写当中，一边探索Vue一边写，然后觉得Vue真的是刷新了我对传统前端的认知，确实很好用。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：28275次
排名：千里之外
原创：62篇
(5)(4)(4)(5)(6)(3)(8)(8)(5)(8)(16)