Quellcode durchsuchen

support dynamic refs

Evan You vor 10 Jahren
Ursprung
Commit
68a73cfd19
2 geänderte Dateien mit 23 neuen und 2 gelöschten Zeilen
  1. 8 2
      src/core/vdom/modules/ref.js
  2. 15 0
      test/unit/features/ref.spec.js

+ 8 - 2
src/core/vdom/modules/ref.js

@@ -4,14 +4,20 @@ import { remove } from 'shared/util'
 
 export default {
   create (_, vnode) {
-    registerRef(vnode, false)
+    registerRef(vnode)
+  },
+  update (oldVnode, vnode) {
+    if (oldVnode.data.ref !== vnode.data.ref) {
+      registerRef(oldVnode, true)
+      registerRef(vnode)
+    }
   },
   destroy (vnode) {
     registerRef(vnode, true)
   }
 }
 
-function registerRef (vnode: VNodeWithData, isRemoval: boolean) {
+function registerRef (vnode: VNodeWithData, isRemoval: ?boolean) {
   const key = vnode.data.ref
   if (!key) return
 

+ 15 - 0
test/unit/features/ref.spec.js

@@ -28,6 +28,21 @@ describe('ref', () => {
     expect(vm.$refs.bar.$options.id).toBe('test2')
   })
 
+  it('should dynamically update refs', done => {
+    const vm = new Vue({
+      data: {
+        value: 'foo'
+      },
+      template: '<div :ref="value"></div>'
+    }).$mount()
+    expect(vm.$refs.foo).toBe(vm.$el)
+    vm.value = 'bar'
+    waitForUpdate(() => {
+      expect(vm.$refs.foo).toBeUndefined()
+      expect(vm.$refs.bar).toBe(vm.$el)
+    }).then(done)
+  })
+
   it('should work as a hyperscript prop', () => {
     const vm = new Vue({
       components,