vue 面试题二

桃扇骨 2022-12-11 09:11 166阅读 0赞

# vue 面试题2 #

1.  vue的 模板template会编译成什么？  
    答案：  
    vue的模板实际上被编译成了render渲染函数，  
    webpack vue-template-compiler  
    把模板转换为渲染函数  
    渲染函数执行并返回虚拟dom节点
2.  请用js对象形式描述html标签（js模拟dom节点，虚拟dom）  
    `<p> <a>内容</a> <span>行内</span></p>`

*  虚拟dom描述  
    1. 标签名tag  
    2. 属性 attrs/propertys  
    3. 子节点 children

**vue中动态创建组件**
    <component :is="">动态组件
    render(createElement){
    return createElement(标签，属性，子节点)
    }
    eg:
    {
    tag:"p",
    propertys:{
      id:"best"
    }
    children:[
    {}tag:"a",children:["内容"]}
    {}tag:"span",children:["行内"]}
    ]
    }

1.  react 获取dom的方法  
    ref = “myp” ref = \{elem=>myp=elem\}  
    常规dom操作  
    react 原生函数 findDoMNode获取dom
2.  render

*  createElement（创造一个虚拟dom节点）  
    1. 标签名  
    2. 属性  
    3. 子节点，值  
    4. 直接支持jsx语法
 *  作用：动态创建组件，生成模板

1.  react 跨层传参
    
    1.  通过中间组件转发
    2.  redux
    3.  context 上下
2.  react 如何实现优化  
    shouldComponentUpdate(nextProps,nextState)\{  
    return true 渲染  
    return false 不渲染  
    \}
3.  vue中动态创建组件  
    `<component :is="">`动态组件

render(createElement){
    return createElement(标签，属性，子节点)
    }

1.  对vue虚拟dom的理解
    
    1.  vdom本质就是通过js去模拟dom节点，优化到dom渲染与操作  
        2.通过diff算法，来查看现有dom节点与最新的dom节点有哪些差异  
        3.通过patch方法对差异实现最小化更新渲染

*  diff  
    1.只比较同级的节点  
    2.如果标签不同就删除重建  
    3.如果标签相同，key相同就保持不变

1.  你用过的react生命周期有哪些?  
    shouldComponentUpdate优化渲染更新  
    componentDidMount  
    可以获取dom，ajax, 初始化,定时器,  
    componentWillMount  
    componentWillUnmount移除定时器  
    componentWillRecivedProps监听props