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

2023-06-16 377 0

// 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)

})

回答

相关文章

nuxt2部署静态化和ssr的时候访问首页先报404再出现首页为什么?
`clip-path` 如何绘制圆角平行四边形呢?
多线程wait方法报错?
VUE 绑定的方法如何直接使用外部函数?
vue2固定定位该怎么做?
谁有redis实现信号量的代码,希望借鉴一下?