vue 中DOM渲染的问题

如果我们在有输入内容的情况下，切换了类型，我们会发现文字依然显示之前的输入的内容。

但是按道理讲，我们应该切换到另外一个input元素中了。

在另一个input元素中，我们并没有输入内容。

为什么会出现这个问题呢？

这是因为Vue在进行DOM渲染时，出于性能考虑，会尽可能的复用已经存在的元素，而不是重新创建新的元素。

在上面的案例中，Vue内部会发现原来的input元素不再使用，直接作为else中的input来使用了。

1、判断是否有render函数，如果有，直接将render函数返回结果作为虚拟节点树；如果没有，看有没有template配置

2、如果有template配置，将template作为模板 编译为render函数；如果没有则看el配置的outerHTML作为模板

render函数：

a、render 函数的参数（createElement）

createElement 是 render 函数 的参数，它本身也是个函数，并且有三个参数。

b、createElement 函数的参数（三个）

（1）一个 HTML 标签字符串，组件选项对象，或者解析上述任何一种的一个 async 异步函数。类型：{String | Object | Function}。必需。

（2）一个包含模板相关属性的数据对象你可以在 template 中使用这些特性。类型：{Object}。可选。

（3）子虚拟节点 (VNodes)，由 createElement() 构建而成，也可以使用字符串来生成“文本虚拟节点”。类型：{String | Array}。可选。

例子：

var vm= new Vue({

el:"#app",

data:{

author:“web小王子”

}

render(h){

h("h1",[h("h1",

{

      props: {

        someProp: 'foobar'      }

    }，

`第1个vue应用，作者${thisauthor}`)])

}

})

先设置元素的ref，如 <div style="height: 500px" ref="tablewrap" ></div>，要获取该元素高度，必须先给该元素设置css高度

再用  windowgetComputedStyle(this$refstablewrap)height  获取

注意：用this$refs获取dom元素高度，必须在mounted钩子中，如下：

mounted() {

        consolelog(windowgetComputedStyle(this$refstablewrap)height)

}

给element表格设置动态高度，就可以用上述方法

在data中定义变量

最后，在mounted钩子中设置表格的高度

以上就是关于vue 中DOM渲染的问题全部的内容，包括:vue 中DOM渲染的问题、vue渲染虚拟dom树原理、vue 中用this.$refs获取dom元素高度，给element表格设置动态高度等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！