vue实现响应式网页

Vue 数据响应式

2021-09-01 10:33:09

响应式就是一个物体能对外界的刺激做出反应 Vue 的 data 就是响应式 const vm = new Vue({data:{n:0}}) 如果修改 vm.n，那么 UI 中的 n 就会响应 ...改变窗口大小，网页内容会做出响应，就是响应式网页 ...

响应式就是一个物体能对外界的刺激做出反应 
 
 Vue 的 data 就是响应式 
 const vm = new Vue ({data:{n:0}})
如果修改 vm.n，那么 UI 的 n 就会响应
Vue 是通过 Object.defineProperty 来实现数据响应式
 
 
 Vue 的数据响应式原理依赖 Object.defineProperty，Vue 通过设定对象属性的 setter/getter 方法来监听数据的变化，通过 getter 进行依赖收集，而每个 setter 方法就是一个观察者，在数据变更的时候通知订阅者更新视图。Vue 不能检测到对象属性的添加或删除，解决方法是手动调用 Vue.set 或者 this.$set。 
 
何为响应式网页？ 
 
 改变窗口大小，网页内容会做出响应，就是响应式网页 
 
getter / setter 
get 语法将对象属性绑定到查询该属性时将被调用的函数 
当尝试设置属性时，set 语法将对象属性绑定到要调用的函数 
let obj = {
  姓: "徐",
  名: "冬冬",
  get 姓名() {
    return this.姓 + this.名;
  },
  set 姓名(xxx){
    this.姓 = xxx[0]
    this.名 = xxx.substring(1)
  },
  age: 18
};

obj3.姓名 = '徐冬冬' 
Object.defineProperty 
 
 可以给对象添加属性 value 
 可以给对象添加 getter / setter 
 getter / setter 用于对属性的读写进行监控 
 
var _xxx = 0  //用来放 xxx 的值

Object.defineProperty(obj,'xxx',{ // 定义的属性 xxx 是不存在的，如果在后面 return 会死循环
  get(){
    return _xxx
  },
  set(value){
    _xxx = value
  }
}) 
需求一：用 Object.defineProperty 定义 n 
let data = {}

Object.defineProperty(data1, 'n', {
  value: 0
})
 
需求二：n 不能小于 0 （即 data2.n = -1 应该无效，但 data2.n = 1 有效） 
结论：可以给 set 做判断，不满足就不 set 
问题：无法阻止别人修改 _n 的值 
let data = {}

data._n = 0 // _n 用来存储 n 的值

Object.defineProperty(data, 'n', {
  get(){ // 读属性
    return this._n // 防止没有data，所以推荐使用this隐式传参
  },
  set(value){ // 写属性
    if(value < 0) return
    this._n = value
  }
}) 
需求三：使用代理 
结论：因为只暴露了代理对象，别人无法接触真实的对象 
let data = proxy({ data:{n:0} }) // 括号里是匿名对象，无法访问

function proxy({data}){  // 解构赋值，原本应该是(options){const {data} = options}
  const obj = {}
  // 这里的 'n' 写死了，理论上应该遍历 data 的所有 key，这里做了简化
  Object.defineProperty(obj, 'n', { 
    get(){
      return data.n
    },
    set(value){
      if(value<0)return
      data.n = value
    }
  })
  return obj // obj 就是代理
} 
 需求四：绕过代理，直接在初始化时申明引用 
let myData = {n:0}
let data = proxy({ data:myData }) // 括号里是匿名对象，无法访问

myData.n = -1 
需求五：就算用户擅自修改 myData，也要拦截他 
let myData = {n:0}
let data = proxy({ data:myData }) // 括号里是匿名对象，无法访问

function proxy({data}){
  let value = data.n
  Object.defineProperty(data, 'n', { // 申明的 n 和之前的 n 重名，会直接用新的覆盖之前的
    get(){
      return value
    },
    set(newValue){
      if(newValue<0)return
      value = newValue
    }
  })
  // 上面几句会监听 data

  const obj = {}
  Object.defineProperty(obj, 'n', {
    get(){
      return data.n
    },
    set(value){
      if(value<0)return//这句话多余了
      data.n = value
    }
  })
  
  return obj // obj 就是代理
} 
vm = new Vue({data: myData}) 
 
 一、会让 vm 成为 myData 的代理 (proxy)
 二、会对 myData 的所有属性进行监控
 监控是为了防止 myData 的属性变了，vm 不知道
 vm 知道属性变了就可以调用 render(data) 
 Ul= render(data) UI 就可以自动刷新 
 
什么是代理？ 
 
 代理是一种设计模式，对 mydata 对象的属性的读写，全权由另一个对象 vm 负责 
 那么 vm 就是 mydata 的代理 
 
Object.defineProperty 的问题 
 
 Object.defineProperty(obj,'n',{...}) 
 必须要有 n 才能监听&代理 
 如果没有给 n 会有如下问题： 
 Vue 会给出一个警告 
 new Vue({
  data: {},
  template: `
    <div>{{n}}</div>
  `
}).$mount("#app");

[Vue warn]: Property or method "n" is not defined on theinstance
but referenced during render.  
 Vue 只会检查第一层属性，会绕过警告，点击 set b 视图不会显示1，因为 Vue 没法监听一开始不存在的 obj.b
 new Vue({
  data: {
    obj: {
      a: 0 // obj.a 会被 Vue 监听 & 代理
    }
  },
  template: `
    <div>
      {{obj.b}}
      <button @click="setB">set b</button>
    </div>
  `,
  methods: {
    setB() {
      this.obj.b = 1
    }
  }
}).$mount("#app") 
 
 
 解决方法： 
 将 key 都申明好，后面不再加属性
使用 Vue.set 或 this.$set
 Vue.set 和 this.$set 的作用 
 新增 key
自动创建代理和监听
触发 UI 更新（但不会立刻更新）
 this.$set(this.object,'m',100) 
 
数组中新增的 key 
 
 可用 set 来新增 key，更新 Ul 
Vue 篡改了7个 API 方便对数组进行增删
这7个 API 会自动处理监听和代理，并更新 Ul
数组新增 key 最好通过7个 API
 push()
pop()
shift()
unshift()
splice()
sort()
reverse() 
 
  *本文为鲲游北冥的原创文章，著作权归本人和饥人谷所有，转载务必注明来源

收起

展开全文

javascript

Vue数据响应式

2020-12-19 12:26:44

Vue 数据响应式图示理解Vue数据响应式getter和setterObject.defineProperty代理和监听代理（设计模式）监听总结Vue data中的bugVue.set 和 this.$set作用举例Vue中的数组变异数组的变异方法有7个图示理解Vue数据...



 Vue 数据响应式
 图示理解Vue数据响应式
getter和setter
Object.defineProperty
代理和监听
代理（设计模式）
监听
  
  
总结
Vue data中的bug
Vue.set 和 this.$set
作用
举例
  
Vue中的数组变异
数组的变异方法有7个
 

 
图示理解Vue数据响应式 

  
const myData = {
  n: 0
};
console.log(myData);

const vm = new Vue({
  data: myData,
  template: `<div>{{n}}<button @click="add">+10</button></div>`,
  methods: {
    add() {
      //this.n += 10;
      myData.n += 10;
    }
  }
}).$mount("#app");

setTimeout(() => {
  myData.n = 10;
  console.log(myData);
  console.log(vm);
}, 3000);
 
getter和setter 
let obj3 = {
  姓: "高",
  名: "圆圆",
  get 姓名() {
    return this.姓 + this.名;
  },
  set 姓名(xxx) {
    this.姓 = xxx[0];
    this.名 = xxx[1];
  },
  age: 18
};
obj3.xxx = "邓超";
 
Object.defineProperty 
可以给对象添加属性value
可以给对象添加getter/setter
getter/setter用于对属性的读写进行监控 
let _x = 0;
Object.defineProperty(obj3, "xxx", {
  getAge() {
    return _x;
  },
  set(x) {
    _x = x;
  }
});
console.log(obj3);
 
代理和监听 
代理（设计模式） 
对某个对象的属性读写，全权由另外一个对象vm负责
vm就是某个对象的代理
例如obj.n不用，用vm.n来操作obj.n 
/* 
vm = new Vue({data:myData})
会让vm成为myData的代理（proxy）
会对myData的所有属性进行监控
监控原因：为防止myData的属性变了，vm不知道
vm知道了属性变更就可以调用render(data)
UI = render(data)
*/
let data3 = proxy({ data: { n: -1 } });

function proxy({ data }) {
  //o就是一个代理，是谁的代理呢？就是data的代理
  //作用：中转 租房中的客户 中介（事情交给了中介做） 房东（省心）
  const o = {};
  Object.defineProperty(o, "n", {
    get() {
      return data.n;
    },
    set(v) {
      if (v < 0) return;
      data.n = v;
    }
  });
  return o;
}
console.log(`需求四:${data3.n}`);

let data4 = { n: 0 };
let data5 = proxy({ data: data4 });
console.log(`需求四:${data5.n}`);
 
监听 
let myData1 = { n: 0 };
let data6 = proxy2({ data: myData1 });

function proxy2({ data }) {
  let v = data.n;
  Object.defineProperty(data, "n", {
    get() {
      return v;
    },
    set(v) {
      if (v < 0) return;
      data.n = v;
    }
  });
}
//加上几句话就会进行监听
let d = {};
Object.defineProperty(d, "n", {
  get() {
    return d.n;
  },
  set(v) {
    if (d.n < 0) return;
    d.n = v;
  }
});

 
总结 
响应式 
你打我一拳，我会喊疼，那我就是响应式的
若一个物体对外界的刺激做出反应，它就是响应式的 
Vue的data是响应式的 
const vm = new Vue({data:{n:0}})
修改vm.n，那么UI中的n就会响应
Vue2是通过Object.defineProperty来实现数据响应式 
响应式页面 
如果改变窗口的大小，网页会对内容做出响应，那就是响应式页面 
Vue data中的bug 
原因：Object.defineProperty导致的问题
Object.defineProperty(obj,‘n’,{…})，必须要有一个‘n’，才能监听和代理obj.n
要是有人没给一个’n’，bug就出现啦
另外要注意Vue只会检查第一层属性 
Vue.set 和 this.$set 
作用 
新增key
自动创建代理和监听（如果没有就创建）
触发UI更新（但并不会立刻更新） 
举例 
this.$set(this.obj,'m',100);
 
Vue中的数组变异 
数组的变异方法有7个 
push()
pop()
shift()
unshift()
splice()
sort()
reverse()

收起

展开全文

vue的响应式

2020-04-18 17:34:43

vue的响应式简单的说就是数据变化，页面重新渲染。如何更改数据？假设有以下代码： const vm = new Vue({ el:"#app", data:{ msg:"你长得真好看", arr:[1,2,3] } }) 用vm.msg = ...

vue的响应式简单的说就是数据变化，页面重新渲染。
 如何更改数据？假设有以下代码： 
 const vm = new Vue({
            el:"#app",
            data:{
                msg:"你长得真好看",
                arr:[1,2,3]
            }
        })
 
用vm.msg = "小仙女"就可以更改了。为什么可以直接这样写呢？打印以下vm,可以看到有msg,
 
 那么问题来了，为什么data会直接出现在vm实例对象中咧？
 这是因为：当创建vue实例的时候，vue会将data中的成员代理给vue实例，目的是为了实现响应式，监控数据的变化，如何做到的呢？vue2中是使用Object.defineProperty，vue3.0中用proxy,具体实现，稍后下面会讨论。
 接下来，想一下，有没有遇到过这样的情况：你更改了数据，但是页面不会渲染，这是为什么？下面给出答案： 
更改的数据必须是存在的数据，否则不能重新渲染页面（未经过声明的），因为他监听不到；
更改的数据必须已渲染过的数据，否则从性能角度考虑，不会重新渲染页面；
对数组而言：（1）利用索引直接设置一个数组项时；（2）修改数组的长度时。
对对象而言：添加或者删除对象。 
我们更改了数据后，页面会立刻重新渲染吗？
 答案：当然不会，vue更新DOM的操作是异步执行的，只要侦听到数据变化，将开启一个异步队列，如果一个数据被多次变更，那么只会被推入到队列中一次，这样可以避免不必要的计算和DOM操作。
 那我们怎么拿到更改后的数据呢？
 答案：利用vm.$nextTick或Vue.nextTick，在页面重新渲染，DOM更新后，会立刻执行vm.$nextTick。这俩的区别是在于内部函数的this指向不同，vm.$nextTick内部函数的this指向Vue实例对象，Vue.nextTick内部函数的this指向window。
 那nextTick是怎么实现的呢？
 答案：在nextTick的实现源码中，会先判断是否支持微任务，不支持后，才会执行宏任务。 
 if(typeof Promise !== 'undefined') {
      // 微任务
      // 首先看一下浏览器中有没有promise
      // 因为IE浏览器中不能执行Promise
      const p = Promise.resolve();

    } else if(typeof MutationObserver !== 'undefined') {
      // 微任务
      // 突变观察
      // 监听文档中文字的变化，如果文字有变化，就会执行回调
      // vue的具体做法是：创建一个假节点，然后让这个假节点稍微改动一下，就会执行对应的函数
    } else if(typeof setImmediate !== 'undefined') {
      // 宏任务
      // 只在IE下有
    } else {
      // 宏任务
      // 如果上面都不能执行，那么则会调用setTimeout
    }
 
所以，这样就可以看出vue的缺陷了，即：vue是同步执行栈执行完毕后，会执行异步队列。也就是说会一直等待主线程上的任务执行完毕，才能执行异步任务去渲染，如果主线程出现问题，那么页面就会卡死，后面异步不会执行，但react不会，一有空就会执行异步任务。
 重点来了！！！
 上面提到对数组和对象的更改有时候不会渲染页面，那如何更改才可以呢？
 要如何响应式的更新数组和对象？
 更改数组： 
利用数组变异方法：push、pop、shift、unshift、splice、sort、reverse 。
利用vm.$set或者Vue.set实例方法
利用vm.$delete或Vue.delete删除数组中的某一项 
 
 vm.$set是Vue.set的别名
使用方法：Vue.set(object, propertyName, value)，也就是这个意思：Vue.set(要改谁，改它的什么，改成啥) 
 
 
 vm.$delete是Vue.delete的别名
使用方法：Vue.delete(object, target)，也就是这个意思：Vue.delete(要删除谁的值，删除哪个) 
 
更改对象： 
添加利用vm.\$set或者Vue.set实例方法。
删除利用vm.$delete/Vue.delete方法。 
那么vue的响应式原理是什么呢？即如何实现数据监听的？
 vue2.0中是使用Object.defineProperty。注意对数组以及嵌套对象的处理。对数组是要重写原型上的数组方法，先克隆出一个，再对克隆的进行重写，然后将data对象的隐式原型指向克隆的即可。对嵌套对象的处理可以使用递归。 
const data = {
    name:"小辣椒",
    obj:{
        x:1
    },
    arr:[4,5,6]
}

const arrayProto = Array.prototype;
const arrMethod = Object.create(arrayProto);//克隆一份
['push','pop','shift','unshift','sort','splice','reverse'].forEach(method=>{
    arrMethod[method] = function(){
        arrayProto[method].call(this,...arguments);
        render();
    }
})

function defineReactive(data,key,value){
    observer(value);
    Object.defineProperty(data,key,{
        get(){
            console.log("读");
            return value;
        },
        set(newVal){
            if(value === newVal){
                return newVal;
            }
            console.log("写");
            value = newVal;
            render();
        }
    })
}
function observer(data){
    if(Array.isArray(data)){
        data.__proto__ = arrMethod;//如果是数组就改变隐式原型
        return;
    }
    if(typeof data == "object"){
        for (const key in data) {
            defineReactive(data,key,data[key])
        }  
    }
  
}
function render(){
    console.log("页面渲染");
}
observer(data);
 
利用Object.defineProperty实现响应式的劣势 
天生就需要进行递归
监听不到数组不存在的索引的改变
监听不到数组长度的改变
监听不到对象的增删 
在vue3.0中就解决了这个问题，具体实现，请看我的另外一篇博客。
 MVVM原理之初始化data对象 
以上就是我对vue响应式的理解，如有错误，请指正，谢谢！

收起

展开全文

vue实现二级响应式导航栏

千次阅读 2019-06-05 17:11:50

1.通过vue实现表现和数据分离 2.实现了二级导航栏 3.兼容pc端和移动端 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>响应式二级导航栏</title> ...

1.通过vue实现表现和数据分离
 2.实现了二级导航栏
 3.兼容pc端和移动端 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!--禁止浏览器缓存-->
		<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
		<meta http-equiv="Pragma" content="no-cache" />
		<meta http-equiv="Expires" content="0" />
		
		<title>响应式二级导航栏</title>		
				
		<style type="text/css">
			*{
				box-sizing: border-box;
			}
			html,body,div,ul,li,a{
				padding: 0;
				border: 0;
				margin: 0;
			}
			a{
				text-decoration: none;
				color: #000;
			}
			ul{
				clear: both;
				text-decoration: none;
				white-space: nowrap;
			}
			li{
				list-style: none;
			}
			.logo img{
				height: 46px;
				width: auto;
			}
			nav{
				display: flex;
				display: -webkit-flex; /* Safari */
				flex-direction: row;
				flex-wrap: wrap;
				justify-content: flex-start;
				align-items: center;
				padding: 0 30px;
				background: darkgray;
			}
			nav > .nav-item{
				position: relative;				
				padding: 20px 30px 20px 0;
			}
			nav .nav-item a{
				display: inline-block;
				width: 100%;
			}
			nav > .nav-item > a:visited{
				color: #000;
			}
			nav > .nav-item > a:hover,
			nav > .nav-item > a:focus{
				color: #fff;
			}
			nav > .nav-item > .dropdown{
				position: absolute;
				top: 50px;/*需根据需求来做调整*/
				left: 0;
				display: none;
				border-radius: 3px;
				border: 1px solid darkgray;
			}
			@media all and (min-width: 768px) {
				nav > .nav-item > .dropdown{
					padding-top: 20px;
				}
			}
			nav > .nav-item:hover .dropdown{
				display: block;
			}
			.dropdown li a{
				padding: 10px 30px;
			}
			.dropdown > li >a:hover{
				color: darkgray;
			}
			nav .nav-item-form{
				flex: 1;
				-webkit-flex: 1;
				text-align: right;
				padding-right: 0;
			}
			nav form input,
			nav form button{
				padding: 6px 10px 6px;
			}
			.nav-btn{
				display: none;
				position: absolute;
				top: 15px;
				right: 15px;
				z-index: 99999;
				padding: 5px 5px 3px;
				cursor: pointer;
			}
			.nav-btn span{
				display: block;
				width: 15px;
				height: 2px;
				background: #000;
				margin-bottom: 2px;
			}
			@media all and (max-width: 768px) {
				nav{
					position: absolute;
					display: none;
					width: 100%;
					top: 0;
					right: 0;
					z-index: 99998;
					padding : 0 15px 30px;
				}
				nav > .nav-item{
					width: 100%;
				}
				nav form{				
					flex: 1;
					text-align: left;
				}
				nav > .nav-item > .dropdown{
					position: relative;
					top: 0;
					left: 0;
					display: block;
					height: 0;
					overflow: hidden;
				}
				.dropdown li{
					padding: 10px 0px;
					font-size: 13px;
				}
				.dropdown li a{
					padding: 0;
				}
				nav > .nav-item{
					padding: 20px 0 0;
				}
				.dropdown > li >a:hover{
					color: dimgray;
				}
				nav > .nav-item:hover .dropdown{
					height: auto;
				}
				.nav-btn{
					display: inline-block;
				}
			}
		</style>
		
		<!-- <script src="./vue.min.js"></script> -->
		<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script><!--vue插件 视图层与数据分离-->
	</head>
	<body>
		<div id="app">
			<nav id="nav">
				<div class="nav-item nav-item-logo logo">
					<img src="http://via.placeholder.com/88x46" >
				</div>
				<div v-for="item in bookCatas" class="nav-item">
					<a v-if="item.url!=''" :href="item.url">{{ item.booktype }}</a>
					<a v-else href="##">{{ item.booktype }}</a>
					<ul v-if="item.url==''" class="dropdown">
						<li v-for="li in item.ul">
							<a v-if="li.url!=''" :href="li.url">{{ li.bookname }}</a>
						</li>
					</ul>
				</div>
				
				<div class="nav-item nav-item-form">
					<form action="" method="get">
						<input type="text" name="search"value="" />
						<button type="submit">搜索</button>
					</form>
				</div>
			</nav>
			<button type="button" class="nav-btn" id="nav-btn"><!--按钮-->
				<span></span>
				<span></span>
				<span></span>
			</button>
		</div>

		<script type="text/javascript">
			const vue = new Vue({
				el: '#app',
				data: {
					bookCatas: [
						{
							'booktype' : '经管',
							'url': 'http://book.dangdang.com/01.25.htm'
						},
						{
							'booktype' : '文艺',
							'url': '',
							'ul':[
								{
									'bookname': '文学',
									'url': 'http://book.dangdang.com/01.05.htm'
								},
								{
									'bookname': '传记',
									'url': 'http://book.dangdang.com/01.38.htm'
								},
								{
									'bookname': '青春文学',
									'url': 'http://book.dangdang.com/01.01.htm'
								}
							]
						},
						{
							'booktype' : '小说',
							'url': 'http://e.dangdang.com/classification_list_page.html?category=XS2&dimension=dd_sale&order=0'
						},
						{
							'booktype' : '励志',
							'url': 'http://book.dangdang.com/01.21.htm'
						},
						{
							'booktype' : '人文社科',
							'url': '',
							'ul':[
								{
									'bookname': '军事',
									'url': 'http://book.dangdang.com/01.27.htm'
								},
								{
									'bookname': '历史',
									'url': 'http://book.dangdang.com/01.36.htm'
								},
								{
									'bookname': '古籍',
									'url': 'http://book.dangdang.com/01.32.htm'
								}
							]
						},
						{
							'booktype' : '科技',
							'url': '',
							'ul':[
								{
									'bookname': '计算机/网络',
									'url': 'http://book.dangdang.com/01.54.htm'
								},
								{
									'bookname': '科普读物',
									'url': 'http://book.dangdang.com/01.52.htm'
								},
								{
									'bookname': '建筑',
									'url': 'http://book.dangdang.com/01.55.htm'
								},
								{
									'bookname': '农业/林业',
									'url': 'http://category.dangdang.com/cp01.66.00.00.00.00.html'
								}
							]
						}
					]
				},
				methods: {
				}
			})
			
			const navBtn = document.getElementById('nav-btn');
			const nav = document.getElementById('nav');
			var status = 0;//当前隐藏还是显示状态,默认隐藏
			//淡入
			function  fedeIn(opc,elem)//opc: opcity当前值,elem: 当前动画对象
			{	
				elem.style.opacity = 0;				
				elem.style.display = 'block';
				var upInterval = setInterval(function(){
					opc += 0.05;
					elem.style.opacity = opc;
					if(opc>=1)
					{
						clearInterval(upInterval);
					}
				},50);
			}
			//淡出
			function  fedeOut(opc,elem)//opc: opcity当前值,elem: 当前动画对象
			{			
				elem.style.opacity = 1;
				var downInterval = setInterval(function(){
					opc -= 0.05;
					elem.style.opacity = opc;
					if(opc<=0)
					{
						clearInterval(downInterval);
						elem.style.display = 'none';
					}
				},50);
			}
			navBtn.onclick = function(){
				if(status==0)
				{					
					status=1;
					fedeIn(0,nav);
					
				}else{
					status=0;
					fedeOut(1,nav)
				}
			}
			
			window.onresize =function(){//窗口缩放触发事件
				var width = document.body.clientWidth//获取屏幕宽度
				if(width>=768)
				{
					nav.style.display = 'flex';
					nav.style.opacity = 1;
				}else{
					nav.style.display = 'none';
					status=0;
				}
			}
		</script>
	</body>
</html>

 
效果展示:
 1.pc端
 
 2.移动端:

收起

展开全文

导航栏

Vue监听屏幕宽度实现响应式
千次阅读 2019-09-10 02:17:30
今天在做页面的时候突然想搞一个能在手机端也能完美显示的网页，这就意味着要做响应式，也就是要监听网页的宽度。用Vue-cli搭建好项目后在app.vue中写一个方法来监听屏幕宽度 setMobile(){ addEventListener...
收起
Vue的响应式系统 vue源码
2020-03-21 21:46:28
响应式系统 UI 在 MVVM 中指的是 ...Vue 通过一个响应式系统保证了View 与 Modal的同步,由于要兼容IE,Vue 选择了Object.defineProperty作为响应式系统的实现,但是如果不考虑 IE 用户的话,Object.defineProperty并...
收起
vue-cli 中实现响应式布局
千次阅读 热门讨论 2021-02-14 09:28:03
vue-cli 中实现响应式布局我们在进行前端开发中必然会遇到PC与移动端的适配，面对这样的问题有些公司会准备两个页面，移动是移动，PC是PC，而响应式布局就是根据用户不同的机型展示不同的页面，废话不多说，直接贴...
收起
css yarn
vue响应式
2021-08-01 18:55:33
vue响应式 vue程序中，当值发生改变，它会做三件事：更新网页上的值price 计算新的表达式，更新页面price*code 再次调用功能并更新页面totalPriWithTax 通过声明一个class完成以上需求简易的实现，这个class...
收起
js
html5怎么改为vue_Vue数据响应式
2020-11-20 06:55:36
响应式首先我们都知道，只要在 Vue 实例中声明过的数据，那么这个数据就是响应式的。什么是响应式，也即是说，数据发生改变的时候，视图会重新渲染，匹配更新为最新的值。也正是因为这个系统，让我们可以脱离界面的...
收起
VUE响应式原理
2019-09-21 17:50:48
前段时间面试小米被问到vue的响应式原理。然后粗略的回答了发布者订阅者模式，Object.defineProperty()，感觉面试官不是很满意，我自己其实当时答的也没底记录 js中Object.defineProperty()用来在一个对象上定义一...
收起
vue之响应式原理学习笔记
2020-11-04 00:08:33
响应式原理 Object.defineProperty 可以给对象添加属性value 可以给对象添加getter/setter getter/setter用于对属性的读写监控啥是代理（设计模式）对myData对象的读写，全权由另一个对象vm负责那么vm就是myData...
收起
Vue框架设置响应式布局
万次阅读 多人点赞 2018-09-03 09:51:20
回到主题，自适应响应式布局这个话题古老而新颖，从最早的不同分辨率的屏幕，到现在遍布各个生活角落的移动设备，响应式布局已经成了几乎所有互联网公司必备的条件。在我的映像中，bootstrap一直是响应式的头号选择...
收起
[vue]基于vue的响应式HTML img截取显示效果
千次阅读 2018-07-21 20:25:26
vue是一个学习曲线相对平缓的响应式框架，利用vue可以做到素材图片的动态裁剪、切换。
收起
Vue使用ivew组件实现响应式布局
千次阅读 2020-04-26 00:40:50
1.vue-cli3.0中使用iview 链接: Vue-cli3.0中使用iview. 1.在控制台启动vue ui 2.在vue ui中搜索并安装iview 或者直接在控制台输入 cnpm install iview 3.安装好后重启项目 4.在main.js中引入 import iview from '...
收起
利用JS响应式修改vue实现页面的input值
2020-12-03 04:48:12
公司有一个基于Vue实现的登录中心是我负责维护的，页面上是一个常规的登录界面，用户名输入框、密码输入框和登录按钮各一个今天有个同事（之后简称A）过来找我问到这么一个问题：他负责的应用将登录中心集成到了...
收起
vue 创建响应式的导航栏_如何为您的网站创建响应式导航
2020-06-14 16:18:35
实际上，有很多方法可以创建响应式网站导航，甚至还有一些jQuery插件可在一秒钟内完成。然而，而不是应用即时的解决方案，在这篇文章中，我们将引导您如何建立从地上一个简单的导航和使用CSS3媒体查询和一个小...
收起
Vue实现网页版响应式顶部导航栏-------插槽-子组件-父组件
千次阅读 2020-04-25 16:21:34
1、NavBar.vue上代码：里面ul>标签放置一个插槽，用来放置多个li>标签。为什么要放插槽呢？？因为在一些地方我们可能还会用到像这样模板，只是那时的li>标签内容不一样了。所以插槽就很好解决了，下次使用...
收起
css
Vue响应式编程
千次阅读 2019-09-11 18:49:18
Time: 20190911 ...Vue在这个过程中扮演了怎样的角色呢？ Vue会时刻监视着data对象的变化。下面看一个例子： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT...
收起
vue-cli 中是使用css单位rem，实现响应式布局
千次阅读 2018-05-25 15:20:09
分享一种vue-lic中使用rem，实现响应式布局的超简单的方法。第一步：封装设置rem的方法，放在公用类的js文件中，或者直接放在main.js文件中。 /** * 设置rem * @param pwidth * @param prem */ export ...
收起
rem
0-4 Vue：数据响应式（响应式、set、篡改API）
2021-05-15 17:01:18
1.什么是响应式若物体能对外界的刺激作出反应，它就是响应式的 ...如果改变窗口大小，网页内容就会做出响应，那就是响应式网页 4.Vue的data有bug Object.defineProperty 的问题 1.Object.defineProperty(obj,'n
收起
Vue的自动响应式网格布局库
2019-08-08 05:46:08
Vue的自动响应式网格布局库
收起
基于AntDesign Vue的响应式登录页面
2021-07-10 23:32:02
为了做一个自己的前后端分离的后台管理系统，特地做了一下登录页面。大概的架子如下，后面需要替换一下顶部导航的信息。先大概贴一下代码，以后直接复制使用。整体的布局是自己写的样式，如果后面要替换为其他的UI...
收起
html web 前端
vue-cli3 + bootstrap3实现响应式布局
千次阅读 2019-03-02 10:34:16
作用：让网页根据设备dpr和宽度，利用viewport和html根元素的font-size配合rem来适配不同尺寸的移动端设备安装： npm install lib-flexible 引入：入口文件main.js中： import &quot;lib-flexible/...
收起
从开发者角度理解Vue响应式系统
2019-12-05 13:55:37
建立一个Vue响应式系统在本课程中，我们将使用与Vue源代码中相同的技术构建一个简单的响应式系统。这能让你对于Vue.js及其设计模式有更好地了解，也能让你更熟悉 watchers 和 Dep 类。 响应式系统当你第一次看到...
收起
手把手教你剖析vue响应式原理，监听数据不再迷茫
热门讨论 2021-06-03 21:27:58
setState）（1）数据驱动视图 - Vue MVVM（2）数据驱动视图 - React setState（3）总结二、Vue响应式1、vue的响应式是什么2、Object.defineProperty基本用法3、Oject.defineProperty实现响应式（1）监听对象（2）...
收起
javascript js 前端

Vue 数据响应式

getter / setter

Object.defineProperty

vm = new Vue({data: myData})

什么是代理？

Object.defineProperty 的问题

数组中新增的 key

Vue数据响应式

Vue 数据响应式

图示理解Vue数据响应式

getter和setter

Object.defineProperty

代理和监听

代理（设计模式）

监听

总结

Vue data中的bug

Vue.set 和 this.$set

作用

举例

Vue中的数组变异

数组的变异方法有7个

vue的响应式

vue实现二级响应式导航栏

Vue监听屏幕宽度实现响应式

Vue的响应式系统 vue源码

vue-cli 中实现响应式布局

vue响应式

html5怎么改为vue_Vue数据响应式

VUE响应式原理

vue之响应式原理学习笔记

Vue框架设置响应式布局

[vue]基于vue的响应式HTML img截取显示效果

Vue使用ivew组件实现响应式布局

利用JS响应式修改vue实现页面的input值

vue 创建响应式的导航栏_如何为您的网站创建响应式导航

Vue实现网页版响应式顶部导航栏-------插槽-子组件-父组件

Vue响应式编程

vue-cli 中是使用css单位rem，实现响应式布局

0-4 Vue：数据响应式（响应式、set、篡改API）

Vue的自动响应式网格布局库

基于AntDesign Vue的响应式登录页面

vue-cli3 + bootstrap3实现响应式布局

从开发者角度理解Vue响应式系统

手把手教你剖析vue响应式原理，监听数据不再迷茫

vue实现响应式网页