MVVM到底是什么?看它就够了

前端面试题

这套前端面试题我会持续更新的,我不想用太多文字去解释"题",而是用代码去解释问题,所以我们不要渴望通过背提纲来提升自己,看源码找答案

什么是MVVM?能否用js实现一下Vue v-model的原理?

Model 模型层
view Model视图模型
view视图层

MVVM即M(模型层)+V(视图层)+VM(视图模型层)
当模型层中的数据发生改变时 通过视图模型层可以修改与之绑定的视图层的数据(单向绑定)
当视图层发生改动时,通过视图模型曾与之绑定的模型层的数据页发生改变(双向绑定) 这种现象成为MVVM思想
总结:MVVM就是Vue双向绑定的思想


那么这三个模块都是代码中的哪一部分,上一段HTML代码说明问题


<html lang="ch-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>什么是MVVMtitle>
head>
<body>
	
    <h2 id="myH2">h2>
    <input type="text">
<script>
	//Model
    let msg ="welecome"
    //view Model
    let node =document.getElementById("myH2")
    node.innerHTML =msg
script>
body>
html>

打个比方view就像是一个县,model就好比是县长和它的领导班子,view model就是一部火车让县长的领导班子愉快的去县城就职(没有麻匪的事!)
代码一执行
MVVM到底是什么?看它就够了_第1张图片
msg就出现在了h2里面


Vue的 v-model的原理?

其实很简单 v-model双向绑定它实现了view直接影响model的壮举,它是这么实现的(简单模拟一下)


<html lang="ch-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>什么是MVVMtitle>
head>
<body>
	
    <h2 id="myH2">h2>
    <input type="text" id="myInput">
    <script>
    //model
        let msg ="welcome"
       //view-model
        window.onload=function(){
      
            let nodeh2 =document.getElementById("myH2")
            let nodeinput =document.getElementById("myInput")
            nodeh2.innerHTML =msg
            nodeinput.value =msg
            //加上监听input变动改变msg 重新赋值给h2
            nodeinput.addEventListener('input',function(){
      
                msg =this.value
                nodeh2.innerHTML =msg
            })
        }
    script>
body>
html>
改变视图层
触发监听器
修改模型层
重新把模型层交给视图层

MVVM到底是什么?看它就够了_第2张图片

代码应该很好理解,由此一来就实现了view影响model实现了双向绑定继而体现了MVVM的思想

拓展

Vue想要单向绑定:v-once

想要一次性的在加载完毕以后就绑定完毕,从此再无瓜葛

<p v-once>{
    {msg}}p>

Vue实例

msg:'loveu3000'

这么一来就赋值了一下,任由你再改msg的值 视图层也不会有变化

相当于innerHTML的 v-html

什么是XSS攻击?

innerHTML可以插入标签,恶意者可以修改里面的代码块,从而达到加载页面运行自己插入的
代码的目的

下面这么做就很危险

<input type="text" v-model="msg"/>
<div v-html="msg">div>
// 因为用户输入的信息不可信,这样输入什么就会放入什么,v-html就相当于一个innerHTML

不过v-html只能执行html和css(与innnerHTML一样) 插入的内容如果绑定了事件即使解析了也不会触发,所以Vue还是防止了XSS攻击


它会覆盖原本标签内的子标签

 <p v-html="value">看看我被覆盖了吗p>

Vue实例

value:'我是插入的超文本',

运行一下会发现只剩下"我是插入的超文本了"…

总结

原创内容喜欢的话点赞支持一下吧,这个面试题的专栏我会持续更新的~~么么哒

你可能感兴趣的:(前端面试题,面试,mvvm,vue)