当前位置: 首页 > Web前端 > vue.js

模仿vue自己写一个响应式框架(五)终章-v-for指令实现

时间:2023-03-31 15:04:53 vue.js

概述上一篇我们实现了vue对象的构建,初步实现了变量绑定和事件绑定,现在我们有了只有一个问题要解决,就是v-for指令的实现,这也是本系列最难的部分。困难实施v-for在表达式解析方面有以下困难。v-for有两种语法:iteminitems和(item,index)initems。第二种可以获得序列号。程序需要解析这两种语法来编译v-for中的元素,虽然已经有编译函数,但是v-for循环中的上下文与vue不一致。这是什么意思?compile中绑定的值和变量是vue的,vue是全局的,但是v-for绑定的变量是在循环里的,每次都不一样。在编译中编译。如果遇到v-for,会先生成v-for中的所有节点,然后作为子节点追加到父节点。因此第一步判断v-for指令是否被包含functionisLoop(element){returnelement.attributes&&element.attributes['v-for'];}compile函数递归编译子节点for(leti=0;i