Vue中添加了非绑定的ref、key的元素会被认为是非静态的?

  • Z时代
  • 2024-03-15
  • 分类：IT

// Vue 2.0 test/unit/modules/compiler/optimizer.spec.js
it('key', () => {
    const ast = parse('<p key="foo">hello world</p>', baseOptions)
    optimize(ast, baseOptions)
    expect(ast.static).toBe(false)
})
it('ref', () => {
    const ast = parse('<p ref="foo">hello world</p>', baseOptions)
    optimize(ast, baseOptions)
    expect(ast.static).toBe(false)
})

Vue中判断一个元素是否是静态的根据，是这个元素是否有可能发生改变。不会变化的元素就会被视为static，可以进行一些优化以提升性能。上例中的两个元素都被视为non static。

添加了ref的元素是non static可能还说得过去，因为可以通过ref获取到元素后，直接通过DOM修改。添加了key的元素要如何修改？

另外这个文件里还有个测试不太懂

it('render tag', () => {
    const ast = parse('<render :method="onRender"><p>hello</p></render>', baseOptions)
    optimize(ast, baseOptions)
    expect(ast.static).toBe(false)
})

从没有听说过有<render>这个标签，网上也搜不到

回答：

在 Vue 里，ref 和 key 属性的默认不会变，但是可以通过一些交互来改变，所以是动态的。
你说的的 <render> 标签，这不是 HTML 或 Vue 的标准标签。这可能是在测试里用来模拟行为的自定义标签。<render> 标签有一个的 method 属性，这说明可能会在运行时改变，所以它是非静态的。

回答：

it('ref', () => {

const ast = parse('<p ref="foo">hello world</p>', baseOptions)
optimize(ast, baseOptions)
expect(ast.static).toBe(false)

})

以上是 Vue中添加了非绑定的ref、key的元素会被认为是非静态的? 的全部内容， 来源链接： utcz.com/p/934436.html

回到顶部