change ref to a built-in attribute

Author: yyx990803

src/compiler/codegen.js

@@ -126,7 +126,7 @@ function genData (el: ASTElement): string | void {
   }
   // ref
   if (el.ref) {
-    data += `ref:"${el.ref}",`
+    data += `ref:${el.ref},`
   }
   if (el.refInFor) {
     data += `refInFor:true,`

src/compiler/directives/index.js

@@ -1,9 +1,7 @@
-import ref from './ref'
 import bind from './bind'
 import { noop } from 'shared/util'
 
 export default {
-  ref,
   bind,
   cloak: noop
 }

src/compiler/directives/ref.js

@@ -116,13 +116,16 @@ export function parse (
       if (inPre) {
         processRawAttrs(element)
       } else {
-        processKey(element)
         processFor(element)
         processIf(element)
         processOnce(element)
+
         // determine whether this is a plain element after
-        // removing if/for/once attributes
+        // removing structural attributes
         element.plain = !element.key && !attrs.length
+
+        processKey(element)
+        processRef(element)
         processSlot(element)
         processComponent(element)
         for (let i = 0; i < transforms.length; i++) {
@@ -252,6 +255,21 @@ function processKey (el) {
   }
 }
 
+function processRef (el) {
+  const ref = getBindingAttr(el, 'ref')
+  if (ref) {
+    el.ref = ref
+    let parent = el
+    while (parent) {
+      if (parent.for !== undefined) {
+        el.refInFor = true
+        break
+      }
+      parent = parent.parent
+    }
+  }
+}
+
 function processFor (el) {
   let exp
   if ((exp = getAndRemoveAttr(el, 'v-for'))) {

src/compiler/parser/index.js

@@ -6,7 +6,7 @@ describe('Options props', () => {
       data: {
         b: 'bar'
       },
-      template: '<test v-bind:b="b" v-ref:child></test>',
+      template: '<test v-bind:b="b" ref="child"></test>',
       components: {
         test: {
           props: ['b'],
@@ -30,7 +30,7 @@ describe('Options props', () => {
       data: {
         b: 'bar'
       },
-      template: '<test v-bind:b="b" v-ref:child></test>',
+      template: '<test v-bind:b="b" ref="child"></test>',
       components: {
         test: {
           props: { b: String },
@@ -266,7 +266,7 @@ describe('Options props', () => {
 
   it('treat boolean props properly', () => {
     const vm = new Vue({
-      template: '<comp v-ref:child prop-a prop-b="prop-b"></comp>',
+      template: '<comp ref="child" prop-a prop-b="prop-b"></comp>',
       components: {
         comp: {
           template: '<div></div>',

test/unit/features/options/props.spec.js

@@ -1,6 +1,6 @@
 import Vue from 'vue'
 
-describe('Directive v-ref', () => {
+describe('ref', () => {
   const components = {
     test: {
       id: 'test'
@@ -10,19 +10,22 @@ describe('Directive v-ref', () => {
     }
   }
 
-  it('should accept hyphenated refs', () => {
+  it('should work', () => {
     const vm = new Vue({
+      data: {
+        value: 'bar'
+      },
       template: `<div>
-        <test v-ref:test></test>
-        <test2 v-ref:test-hyphen></test2>
+        <test ref="foo"></test>
+        <test2 :ref="value"></test2>
       </div>`,
       components
     })
     vm.$mount()
-    expect(vm.$refs.test).toBeTruthy()
-    expect(vm.$refs.test.$options.id).toBe('test')
-    expect(vm.$refs['test-hyphen']).toBeTruthy()
-    expect(vm.$refs['test-hyphen'].$options.id).toBe('test2')
+    expect(vm.$refs.foo).toBeTruthy()
+    expect(vm.$refs.foo.$options.id).toBe('test')
+    expect(vm.$refs.bar).toBeTruthy()
+    expect(vm.$refs.bar.$options.id).toBe('test2')
   })
 
   it('should work as a hyperscript prop', () => {
@@ -39,25 +42,9 @@ describe('Directive v-ref', () => {
     expect(vm.$refs.test.$options.id).toBe('test')
   })
 
-  it('should accept camelCase refs', () => {
-    const vm = new Vue({
-      template:
-        `<div>
-          <test v-ref:test></test>
-          <test2 v-ref:testCase></test2>
-        </div>`,
-      components
-    })
-    vm.$mount()
-    expect(vm.$refs.test).toBeTruthy()
-    expect(vm.$refs.test.$options.id).toBe('test')
-    expect(vm.$refs.testCase).toBeTruthy()
-    expect(vm.$refs.testCase.$options.id).toBe('test2')
-  })
-
   it('should accept HOC component', () => {
     const vm = new Vue({
-      template: '<test v-ref:test></test>',
+      template: '<test ref="test"></test>',
       components
     })
     vm.$mount()
@@ -68,7 +55,7 @@ describe('Directive v-ref', () => {
   it('should accept dynamic component', done => {
     const vm = new Vue({
       template: `<div>
-        <component :is="test" v-ref:test></component>
+        <component :is="test" ref="test"></component>
       </div>`,
       components,
       data: { test: 'test' }
@@ -91,7 +78,7 @@ describe('Directive v-ref', () => {
       },
       template: `
         <div>
-          <div v-for="n in items" v-ref:list>{{n}}</div>
+          <div v-for="n in items" ref="list">{{n}}</div>
         </div>
       `
     }).$mount()
@@ -117,7 +104,7 @@ describe('Directive v-ref', () => {
       },
       template: `
         <div>
-          <test v-for="n in items" v-ref:list :n="n"></test>
+          <test v-for="n in items" ref="list" :n="n"></test>
         </div>
       `,
       components: {

test/unit/features/directives/ref.spec.js renamed to test/unit/features/ref.spec.js

@@ -68,16 +68,16 @@ describe('codegen', () => {
     )
   })
 
-  it('generate v-ref directive', () => {
+  it('generate ref', () => {
     assertCodegen(
-      '<p v-ref:component1></p>',
+      '<p ref="component1"></p>',
       `with(this){return _h(_e('p',{ref:"component1"}))}`
     )
   })
 
-  it('generate v-ref directive on v-for', () => {
+  it('generate ref on v-for', () => {
     assertCodegen(
-      '<ul><li v-for="item in items" v-ref:component1></li></ul>',
+      '<ul><li v-for="item in items" ref="component1"></li></ul>',
       `with(this){return _h(_e('ul'),[(items)&&_l((items),function(item){return _h(_e('li',{ref:"component1",refInFor:true}))})])}`
     )
   })

test/unit/modules/compiler/codegen.spec.js

@@ -152,26 +152,33 @@ describe('optimizer', () => {
     expect(ast.children[0].static).toBe(false)
   })
 
-  it('transition', () => {
-    const ast = parse('<p v-if="show" transition="expand">hello world</p>', baseOptions)
+  it('key', () => {
+    const ast = parse('<p key="foo">hello world</p>', baseOptions)
     optimize(ast, baseOptions)
     expect(ast.static).toBe(false)
     expect(ast.children[0].static).toBe(true)
   })
 
-  it('v-bind directive', () => {
-    const ast = parse('<input type="text" name="field1" :value="msg">', baseOptions)
+  it('ref', () => {
+    const ast = parse('<p ref="foo">hello world</p>', baseOptions)
     optimize(ast, baseOptions)
     expect(ast.static).toBe(false)
+    expect(ast.children[0].static).toBe(true)
   })
 
-  it('v-ref directive', () => {
-    const ast = parse('<p v-ref:foo>hello world</p>', baseOptions)
+  it('transition', () => {
+    const ast = parse('<p v-if="show" transition="expand">hello world</p>', baseOptions)
     optimize(ast, baseOptions)
     expect(ast.static).toBe(false)
     expect(ast.children[0].static).toBe(true)
   })
 
+  it('v-bind directive', () => {
+    const ast = parse('<input type="text" name="field1" :value="msg">', baseOptions)
+    optimize(ast, baseOptions)
+    expect(ast.static).toBe(false)
+  })
+
   it('v-on directive', () => {
     const ast = parse('<input type="text" name="field1" :value="msg" @input="onInput">', baseOptions)
     optimize(ast, baseOptions)