渲染函数的使用

代替原生JS的DOM操作，放入渲染函数中可在浏览器初始化成功前渲染好虚拟DOM。
另外渲染函数功能十分强大，支持动态的载入渲染函数，动态渲染DOM。
渲染函数传入createElement，然后再返回createElement函数

crateElement函数第一个参数可传入组件或者字符串形式的HTML标
函数第二参数传入的是数据对象，其中包括：

{// 1 可传入class, 与在组件上 `v-bind:class` 的 API 相同，接受一个字符串、对象或字符串和对象组成的数组'class': {foo: true,bar: false},// 2 可传入style, 与 `v-bind:style` 的 API 相同，接受一个字符串、对象或字符串和对象组成的数组style: {color: 'red',fontSize: '14px'},// 3 可传入普通的 HTML attributeattrs: {id: 'foo'},// 4 可传入 组件 prop , 当 第一个参数为tempalte 的时候可以使用props: {myProp: 'bar'},// 5 可传入DOM属性domProps: {innerHTML: 'baz'},// 6 可传入监听事件，相当于 @on:click = clickHandler()on: {click: this.clickHandler},// 7 仅用于组件，用于监听原生事件，而不是组件内部使用,`vm.$emit` 触发的事件。nativeOn: {click: this.nativeClickHandler},// 8 传入自定义指令。注意，你无法对 `binding` 中的 `oldValue`赋值，因为 Vue 已经自动为你进行了同步。directives: [{name: 'my-custom-directive',value: '2',expression: '1 + 1',arg: 'foo',modifiers: {bar: true}}],// 9 传入作用域插槽的格式为   { name: props => VNode | Array<VNode> }scopedSlots: {default: props => createElement('span', props.text)},// 如果组件是其它组件的子组件，需为插槽指定名称slot: 'name-of-slot',// 其它特殊顶层 propertykey: 'myKey',ref: 'myRef',// 10  如果你在渲染函数中给多个元素都应用了相同的 ref 名，// 那么 `$refs.myRef` 会变成一个数组。refInFor: true
}

第三个参数是传入其子元素，下面demo直接写入行内的文本作为子元素

demo

该demo动态的传入上级的标签 ul 和 foods 数据，同时数据对象中设置 stlye 和on 点击事件

<template><test :foods="foods" tag="ul"></test>
</template><script>
import Test from "./test";
export default {components: {Test,},data() {return {foods: ["鸡肉", "鸭肉", "鱼肉"],};},
};
</script>

<script>
export default {name: "test",render(createElement) {return createElement(this.tag,{},this.foods.map((food) =>createElement("li",{style: { "background-color": "#fee565" },on: { click:()=>console.log(food) },},`${food}`)));},props: {tag: {type: String,},foods: {type: Array,},},
};
</script>

watch

监听数据值的变化

字符串，数值，布尔值等原始类型对象可以声明取到新的值与旧的值，且直接以该变量数据为名的函数即可监听
对象类型的数据传入时，应该外层以对象进行声明，handler作为对象的方法获取新值旧值，直接打印也将直接打印一个对象，但由于对象地址所指的是同一块地址，则新值与旧值是一致的

<template><div><input type="text" v-model="name" /><div>姓名：{{ name }}</div><input type="text" v-model="info.age" /><div>年龄：{{ info.age }}</div></div>
</template><script>
export default {data() {return {name: "",info: {age: "",},};},watch: {name(newVal, oldVal) {console.log("新值", newVal, "旧值", oldVal);},info: {handler(newVal, oldVal) {console.log("新值", newVal, "旧值", oldVal);},deep: true,},},
};
</script>

mixin

主要用法是用于提取不同组件的公共部分
导入后，以对象的形式声明即可直接使用
混入部分的钩子函数会加载早于各组件

<template><div><button @click="a_func">{{ a_val }}</button><button @click="commonMethod">{{commonData}}</button></div>
</template><script>
import mixin from "./mixin.js";
export default {name: "Amix",mixins: [mixin],data() {return {a_val: "组件a的数据",};},methods: {a_func() {console.log("组件a的方法");},},mounted() {console.log("组件a的mounted");},
};
</script>

<template><div><button @click="b_func">{{ b_val }}</button><button @click="commonMethod">{{commonData}}</button></div>
</template><script>
import mixin from "./mixin.js";
export default {name: "Bmix",mixins: [mixin],data() {return {b_val: "组件b的数据",};},methods: {b_func() {console.log("组件b的方法");},},mounted() {console.log("组件b的mounted");},
};
</script>

公共部分

export default{data(){return{commonData:"公共的数据"}},methods:{commonMethod(){console.log("公共的方法");}},mounted(){console.log('公共的mounted');}
}

Vue（三）watch 插槽渲染函数的使用相关推荐

Vue.js 中的渲染函数是什么？如何使用渲染函数？
Vue.js 中的渲染函数是什么?如何使用渲染函数? Vue.js 是一款流行的前端框架,它提供了许多方便的工具和 API,用于构建交互式的用户界面.其中,渲染函数是 Vue.js 中一个强大的工具, ...
Vue三种插槽的理解
1.什么是插槽插槽就是子组件给父组件预留的位置,用来给父组件补充他需要显示的内容 2.默认插槽直接在子组件上用<slot></slot>进行占位即可 3.具名插槽具名插槽 ...
vue渲染大量数据如何优化_Vue3 Compiler 优化细节，如何手写高性能渲染函数
送5本<你不知道的 JavaScript 上卷>点我抽奖,祝大家好运 Vue3 的 Compiler 与 runtime 紧密合作,充分利用编译时信息,使得性能得到了极大的提升.本文的目的 ...
Vue在渲染函数createELement和JSX中使用插槽slot
Vue对于插槽有两个专门的APIvm.$slots和vm.$scopedSlots,分别是普通插槽和作用域插槽,使用JSX语法或渲染函数的时候,定义插槽将使用上述两个API. 渲染函数createEl ...
Vue渲染函数render
渲染函数render render 函数跟模板(template) 都是用来创建 html 模板的,但是有些场景中用 template 实现起来代码冗长繁琐而且有大量重复,这时候就可以用 rend ...
vue 渲染函数处理slot_详解Vue的slot新用法
摘要: 理解Vue插槽. Fundebug经授权转载,版权归原作者所有. 为了保证的可读性,本文采用意译而非直译. 最近发布不久的Vue 2.6,使用插槽的语法变得更加简洁. 对插槽的这种改变让我对发 ...
Vue - 渲染函数render
一.render函数是什么简单的说,在vue中我们使用模板HTML语法来组建页面的,使用render函数我们可以用js语言来构建DOM.因为vue是虚拟DOM,所以在拿到template模板时也要转 ...
Vue的渲染函数renderh
前言 vue中我们一般会用模板来创建HTML,但是在有些情况也会需要用到渲染函数. 渲染函数是用来生成Virtual DOM的.Vue推荐使用模板来构建我们的应用界面,在底层实现中Vue会将模板编译成 ...
【vue3】vue3在setup的render渲染函数中如何使用slots（插槽）？
在setup中使用插槽,需要配合render渲染函数,先上代码. 子组件slotsTest.vue: <script lang="ts"> import { h,ren ...

Vue（三）watch 插槽渲染函数的使用

Vue render函数

渲染函数的使用

demo

watch

mixin

Vue（三）watch 插槽渲染函数的使用相关推荐

最新文章

热门文章

Vue（三）watch 插槽 渲染函数的使用

Vue render函数

渲染函数的使用

demo

watch

mixin

Vue（三）watch 插槽 渲染函数的使用相关推荐

最新文章

热门文章

Vue（三）watch 插槽渲染函数的使用

Vue（三）watch 插槽渲染函数的使用相关推荐