Skip to content

Commit 7c1d196

Browse files
yyx990803yyx990803
committed
API change: split scope into data and methods 
1 parent c75aa42 commit 7c1d196

26 files changed

+155
-148
lines changed

‎examples/firebase/app.js‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ Users.on('child_removed', function (snapshot) {
2020
var app = new Vue({
2121
el: '#app',
2222
filters: validators,
23-
scope: {
23+
data: {
2424
users: [],
2525
newUser: {
2626
name: '',
@@ -40,7 +40,9 @@ var app = new Vue({
4040
}
4141
return valid
4242
}
43-
},
43+
}
44+
},
45+
methods: {
4446
addUser: function (e) {
4547
e.preventDefault()
4648
if (this.isValid) {
@@ -49,7 +51,7 @@ var app = new Vue({
4951
}
5052
},
5153
removeUser: function (e) {
52-
new Firebase(baseURL + 'users/' + e.item.id).remove()
54+
new Firebase(baseURL + 'users/' + e.targetVM.id).remove()
5355
}
5456
}
5557
})

‎examples/firebase/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@
1010
<body>
1111
<div id="app">
1212
<ul>
13-
<li class="user" v-repeat="user:users" v-transition>
14-
<span>{{user.name}} - {{user.email}}</span>
13+
<li class="user" v-repeat="users" v-transition>
14+
<span>{{name}} - {{email}}</span>
1515
<button v-on="click:removeUser">X</button>
1616
</li>
1717
</ul>

‎examples/todomvc/js/app.js‎

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -24,10 +24,25 @@ var app = new Vue({
2424
}).length
2525
},
2626

27-
scope: {
27+
data: {
2828

2929
todos: todoStorage.fetch(),
3030

31+
allDone: {
32+
$get: function () {
33+
return this.remaining === 0
34+
},
35+
$set: function (value) {
36+
this.todos.forEach(function (todo) {
37+
todo.completed = value
38+
})
39+
this.remaining = value ? 0 : this.todos.length
40+
todoStorage.save()
41+
}
42+
}
43+
},
44+
45+
methods: {
3146
updateFilter: function () {
3247
var filter = location.hash.slice(2)
3348
this.filter = (filter in filters) ? filter : 'all'
@@ -45,7 +60,7 @@ var app = new Vue({
4560
},
4661

4762
removeTodo: function (e) {
48-
this.todos.remove(e.targetVM.$scope)
63+
this.todos.remove(e.targetVM.$data)
4964
this.remaining -= e.targetVM.completed ? 0 : 1
5065
todoStorage.save()
5166
},
@@ -78,19 +93,6 @@ var app = new Vue({
7893
return todo.completed
7994
})
8095
todoStorage.save()
81-
},
82-
83-
allDone: {
84-
$get: function () {
85-
return this.remaining === 0
86-
},
87-
$set: function (value) {
88-
this.todos.forEach(function (todo) {
89-
todo.completed = value
90-
})
91-
this.remaining = value ? 0 : this.todos.length
92-
todoStorage.save()
93-
}
9496
}
9597
}
9698
})

‎src/compiler.js‎

Lines changed: 28 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ var Emitter = require('./emitter'),
1313
slice = Array.prototype.slice,
1414
log = utils.log,
1515
makeHash = utils.hash,
16+
extend = utils.extend,
1617
def = utils.defProtected,
1718
hasOwn = Object.prototype.hasOwnProperty
1819

@@ -30,21 +31,20 @@ function Compiler (vm, options) {
3031

3132
// process and extend options
3233
options = compiler.options = options || makeHash()
34+
var data = compiler.data = options.data || {}
3335
utils.processOptions(options)
34-
utils.extend(compiler, options.compilerOptions)
36+
extend(compiler, options.compilerOptions)
37+
extend(vm, options.data, true)
38+
extend(vm, options.methods, true)
3539

3640
// initialize element
3741
var el = compiler.setupElement(options)
3842
log('\nnew VM instance:', el.tagName, '\n')
3943

40-
// init scope
41-
var scope = compiler.scope = options.scope || {}
42-
utils.extend(vm, scope, true)
43-
4444
compiler.vm = vm
4545
def(vm, '$', makeHash())
4646
def(vm, '$el', el)
47-
def(vm, '$scope', scope)
47+
def(vm, '$data', data)
4848
def(vm, '$compiler', compiler)
4949

5050
// keep track of directives and expressions
@@ -87,16 +87,16 @@ function Compiler (vm, options) {
8787
// beforeCompile hook
8888
compiler.execHook('beforeCompile', 'created')
8989
// the user might have set some props on the vm
90-
// so copy it back to the scope...
91-
utils.extend(scope, vm)
92-
// observe the scope
93-
Observer.observe(scope, '', compiler.observer)
90+
// so copy it back to the data...
91+
extend(data, vm)
92+
// observe the data
93+
Observer.observe(data, '', compiler.observer)
9494

9595
// for repeated items, create an index binding
9696
// which should be inenumerable but configurable
9797
if (compiler.repeat) {
98-
//scope.$index = compiler.repeatIndex
99-
def(scope, '$index', compiler.repeatIndex, false, true)
98+
//data.$index = compiler.repeatIndex
99+
def(data, '$index', compiler.repeatIndex, false, true)
100100
compiler.createBinding('$index')
101101
}
102102

@@ -369,7 +369,7 @@ CompilerProto.bindDirective = function (directive) {
369369
// expression bindings are always created on current compiler
370370
binding = compiler.createBinding(key, true, directive.isFn)
371371
} else if (
372-
hasOwn.call(compiler.scope, baseKey) ||
372+
hasOwn.call(compiler.data, baseKey) ||
373373
hasOwn.call(compiler.vm, baseKey)
374374
) {
375375
// If the directive's compiler's VM has the base key,
@@ -409,7 +409,7 @@ CompilerProto.bindDirective = function (directive) {
409409
CompilerProto.createBinding = function (key, isExp, isFn) {
410410

411411
var compiler = this,
412-
scope = compiler.scope,
412+
data = compiler.data,
413413
bindings = compiler.bindings,
414414
binding = new Binding(compiler, key, isExp, isFn)
415415

@@ -434,8 +434,8 @@ CompilerProto.createBinding = function (key, isExp, isFn) {
434434
// this is a root level binding. we need to define getter/setters for it.
435435
compiler.define(key, binding)
436436
} else {
437-
// ensure path in scope so it can be observed
438-
Observer.ensurePath(scope, key)
437+
// ensure path in data so it can be observed
438+
Observer.ensurePath(data, key)
439439
var parentKey = key.slice(0, key.lastIndexOf('.'))
440440
if (!hasOwn.call(bindings, parentKey)) {
441441
// this is a nested value binding, but the binding for its parent
@@ -456,41 +456,40 @@ CompilerProto.define = function (key, binding) {
456456
log(' defined root binding: ' + key)
457457

458458
var compiler = this,
459-
scope = compiler.scope,
459+
data = compiler.data,
460460
vm = compiler.vm,
461-
value = binding.value = scope[key] // save the value before redefinening it
461+
value = binding.value = data[key] // save the value before redefinening it
462462

463463
if (utils.typeOf(value) === 'Object' && value.$get) {
464464
compiler.markComputed(binding)
465465
}
466466

467-
// $index is inenumerable
468-
if (!(key in scope) && key !== '$index') {
469-
scope[key] = undefined
467+
if (!(key in data)) {
468+
data[key] = undefined
470469
}
471470

472-
// if the scope object is already observed, that means
471+
// if the data object is already observed, that means
473472
// this binding is created late. we need to observe it now.
474-
if (scope.__observer__) {
475-
Observer.convert(scope, key)
473+
if (data.__observer__) {
474+
Observer.convert(data, key)
476475
}
477476

478477
Object.defineProperty(vm, key, {
479478
get: binding.isComputed
480479
? function () {
481-
return scope[key].$get()
480+
return data[key].$get()
482481
}
483482
: function () {
484-
return scope[key]
483+
return data[key]
485484
},
486485
set: binding.isComputed
487486
? function (val) {
488-
if (scope[key].$set) {
489-
scope[key].$set(val)
487+
if (data[key].$set) {
488+
data[key].$set(val)
490489
}
491490
}
492491
: function (val) {
493-
scope[key] = val
492+
data[key] = val
494493
}
495494
})
496495
}

‎src/directives/component.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ module.exports = {
2121
if (!Ctor) utils.warn('unknown component: ' + this.arg)
2222
var options = {
2323
el: this.el,
24-
scope: value,
24+
data: value,
2525
compilerOptions: {
2626
parentCompiler: this.compiler
2727
}

‎src/directives/repeat.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ var mutationHandlers = {
6060
data = col[i]
6161
for (j = 0; j < l; j++) {
6262
vm = vms[j]
63-
if (vm.$scope === data) {
63+
if (vm.$data === data) {
6464
sorted[i] = vm
6565
break
6666
}
@@ -171,7 +171,7 @@ module.exports = {
171171

172172
item = new this.ChildVM({
173173
el: node,
174-
scope: data,
174+
data: data,
175175
compilerOptions: {
176176
repeat: true,
177177
repeatIndex: index,
@@ -196,7 +196,7 @@ module.exports = {
196196
updateIndexes: function () {
197197
var i = this.vms.length
198198
while (i--) {
199-
this.vms[i].$scope.$index = i
199+
this.vms[i].$data.$index = i
200200
}
201201
},
202202

‎src/exp-parser.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ function getRel (path, compiler) {
5959
: path
6060
while (true) {
6161
if (
62-
hasOwn.call(vm.$scope, key) ||
62+
hasOwn.call(vm.$data, key) ||
6363
hasOwn.call(vm, key)
6464
) {
6565
break
@@ -85,7 +85,7 @@ function getRel (path, compiler) {
8585
/**
8686
* Create a function from a string...
8787
* this looks like evil magic but since all variables are limited
88-
* to the VM's scope it's actually properly sandboxed
88+
* to the VM's data it's actually properly sandboxed
8989
*/
9090
function makeGetter (exp, raw) {
9191
/* jshint evil: true */

‎src/main.js‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -86,11 +86,14 @@ function extend (options) {
8686
utils.defProtected(proto, 'constructor', ExtendedVM)
8787

8888
// copy prototype props
89-
var protoMixins = options.proto
90-
if (protoMixins) {
91-
for (var key in protoMixins) {
92-
if (!(key in ViewModel.prototype)) {
93-
proto[key] = protoMixins[key]
89+
var methods = options.methods
90+
if (methods) {
91+
for (var key in methods) {
92+
if (
93+
!(key in ViewModel.prototype) &&
94+
typeof methods[key] === 'function'
95+
) {
96+
proto[key] = methods[key]
9497
}
9598
}
9699
}
@@ -105,7 +108,7 @@ function extend (options) {
105108
/**
106109
* Inherit options
107110
*
108-
* For options such as `scope`, `vms`, `directives`, 'partials',
111+
* For options such as `data`, `vms`, `directives`, 'partials',
109112
* they should be further extended. However extending should only
110113
* be done at top level.
111114
*
@@ -119,7 +122,7 @@ function inheritOptions (child, parent, topLevel) {
119122
child = child || utils.hash()
120123
if (!parent) return child
121124
for (var key in parent) {
122-
if (key === 'el' || key === 'proto') continue
125+
if (key === 'el' || key === 'methods') continue
123126
var val = child[key],
124127
parentVal = parent[key],
125128
type = utils.typeOf(val)

‎test/functional/fixtures/expression.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
Vue.config({debug:true})
2828
var normal = new Vue({
2929
el: '#normal',
30-
scope: {
30+
data: {
3131
one: 'Hello',
3232
two: {
3333
three: 'World'
@@ -38,7 +38,7 @@
3838
var lazy = new Vue({
3939
el: '#lazy',
4040
lazy: true,
41-
scope: {
41+
data: {
4242
one: 'Hi',
4343
two: {
4444
three: 'Ho'
@@ -48,7 +48,7 @@
4848

4949
var conditional = new Vue({
5050
el: '#conditional',
51-
scope: {
51+
data: {
5252
ok: true,
5353
yesMsg: 'YES',
5454
noMsg: 'NO'

‎test/functional/fixtures/extend.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,12 +29,12 @@
2929
},
3030
components: {
3131
'vm-test': {
32-
scope: {
32+
data: {
3333
vmMsg: 'component works'
3434
}
3535
},
3636
'vm-w-model': {
37-
scope : {
37+
data : {
3838
selfMsg: 'component with model '
3939
}
4040
}
@@ -63,7 +63,7 @@
6363
})
6464
new T({
6565
el: '#test',
66-
scope: {
66+
data: {
6767
dirMsg: 'directive',
6868
filterMsg: 'fi43l132ter5 w12345orks',
6969
partialMsg: 'partial works',

0 commit comments

Comments
 (0)