2022/6/8 摸鱼日记

本文介绍了MVVM和MVC两种设计模式,重点讲解了MVVM中的数据双向绑定原理,通过Object.defineProperty实现数据劫持。同时,深入探讨了Vue.js的组件化开发,包括全局与局部组件、动态组件、组件缓存以及组件生命周期。此外,还讨论了组件命名规则和使用方式。
摘要由CSDN通过智能技术生成

什么是mvvm

mvvm本质上描述的是试图和逻辑的关系。专业术语中称为数据的双向绑定

什么是mvc

主要体现在后端应用场景,将客户端请求的和对应的业务模块进行规则的映射。会根据不同的请求分发到不同业务模块中 可在固定的的模式下完成复杂的业务功能和处理软件结构,提高开发效率。

数据双向绑定是通过数据拦截的方式实现的。底层原理

let wxx='ak47'
//声明变量
Object.defineProperty(window,'xx',{
        get(){

          console.log('有人读取了变量数据 xx')
            return wxx  //ak47
 
  }
        set(val){
        console.log('有人改变了数据xx')
        wxx=val

        
}


})
//数据劫持函数  参数一 挂载的对象
               参数二 挂载属性
               参数三 监听数据变化的对象
               (get()方法读取,set()设置函数)

全局组件,局部组件

Vue.component('组件名称',{
       template:'页面结构'//<h1>我是vue全局组件</h1>,
        data(){

            return:{

            //这里写变量参数,和vue实例的用法一样
}
    }
        


})

//全局组件


//局部组件写在 实例vue里  components组件里

//vue实例
//...

components:{

   组件名:{ 

             template:'页面结构'//<h1>我是vue局部组件</h1>,
        data(){

            return:{

            //这里写变量参数,和vue实例的用法一样
}
    }

        
   
}

}
//...



//局部组件

组件化开发 组件命名规则,多个单词组成,每个首字母大写

页面中使用的时候第一个字符大写小写无所谓,后面大写必须小写,字母前加中划线。

组件的嵌套,一些组件出现在另一些组建的conmponents里

动态组件

把组件写在

<component     :is='变量'>      </component>

vue实例里  date 里   变量=‘组件名’  从而达到   控制变量  即控制组件 达到动态组件

组件缓存

<keep-alive   indclude=''></keep-alive>
<keep-alive   exclude=''></keep-alive>


//indclude 是缓存指定组件
//exclude  缓存除了指定组件

生命周期

一个组件被创建到销毁的过程就是生命周期包括创建,加载,运行,销毁 和缓存组件。

创建实例前  beforeCreate()自动执行

创建实例后 create()自动执行

加载dom前 beforeMount()自动执行

加载dom后 mounted() 自动执行

数据更新前beforeUpdate()  特定执行

数据更新后update()    特定执行

销毁前beforeDestroy()特定执行

销毁后destroy()特定执行

。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

总瞌睡怎么治?

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值