Vue的双向绑定原理(扩展)
- Object.defineProperty
<body>
<input type="text" id="txt">
<script>
var obj = {
name: ""
}
//实现双向绑定
//1. 元素内容变化，数据变化
var txt = document.getElementById("txt");
txt.oninput = function(){
obj.name = this.value;
}
//2. 数据发生变化，文本框中的内容也要随之变化
//Object.defineProperty
Object.defineProperty(obj, "name", {
get: function(){
return this._name;
},
set: function(value){
this._name = value;
//当别人为属性赋值的时候，我们需要将这个值同步更新页面中的文本框中去
txt.value = this._name;
}
});
</script>
</body>
- 观察者模式(发布-订阅模式)
计算属性
var vm = new Vue({
el: "#app",
data: {
num1: 0,
num2: 0
},
computed: {
result(){
return this.num1 + this.num2;
},
result: {
get(){
//在获取值的时候会被调用，获取到的值就是这个函数的返回值
//上面的简写形式的函数其实就是这个get函数
},
set(value){
//当使用计算属性做双向绑定的时候会用到（很少用），计算属性被赋值的时候
//会调用这个方法，我们可以在这个方法中做一些对应的操作
}
}
}
})
//methods和comupted的区别
//1. methods使用在这种场景下的时候，必须加上() 可以传递参数
//2. computed不需要加() computed不能传参
//3. methods中一般做的都是一些业务逻辑（发送ajax请求。。。）
//4. computed只是可以帮你返回一个值，把计算的逻辑封装起来
生命周期钩子函数
1. beforeCreate 在数据初始化之前调用
2. created 在数据初始化完成时调用，这是最早的可以访问到数据的钩子函数
3. beforeMount 在元素被创建并挂载页面之前调用
4. mounted 在元素被创建并挂载页面之后调用
5. beforeUpdate 在有数据变化，更新dom之前调用
6. updated 在有数据变化，更新dom之后调用
7. beforeDestroy 在vue对象被销毁之前调用
8. destroyed 在vue对象被销毁之后调用
//生命周期的大致过程
//1. 调用 new Vue()创建一个Vue实例
//2. 首先初始化生命周期
//3. 初始化了数据
// 我们自己写的数据是在data里面的，但是最终在页面中使用的数据，其实是vue实例中的数据，
//在初始化数据的时候，vue将data中所有的数据，通过Object.defineProperty方法全部挂载到了Vue实例上，我们才可以在页面中使用这些数据
//4. 判断在创建对象的时候，传递进去参数中是否有el参数，如果有，就继续判断是否，有template参数，如果没有
//5. 把我们在el中指定的元素，作为模板
//6. 使用上一步创建出来的模板，将数据渲染进去，产生真实的DOM元素，这个DOM对象其实就是 vm.$el, 将创建出来的DOM对象，替换回el参数对应的元素所在的位置
//7. 此时页面已经展示完毕，进入一个循环阶段
//在这个循环阶段中，Vue会不间断的监视数据的变化，如果有数据发生变化，则创建虚拟DOM，在虚拟DOM应用数据的变换，将虚拟DOM和页面中的DOM树进行对比，找出差异之后，将有差异的部分进行更新
//8. 如果有人调用vm.$destroy方法，这个Vue实例将会被销毁
//9. 在销毁的过程中，会释放所有的资源，比如：监视器、事件、子组件。。
//10. Vue实例被销毁！
ajax
- vue-resource
this.$http.get(url).then(res=>{}, err=>{})
this.$http.post(url, 数据是一个对象, {emulateJSON: true}).then(res=>{}, err=>{})
- axios
axios.interceptors.request.use(config => {
//自己的加工逻辑全部可以在这里进行
//请求会先经过这里，被拦截下来，这个函数执行完毕之后，才会发送出去
//我们可以在这里对请求中的任意内容进行更改，比如 请求头，比如请求数据
// config.headers
// config.data
return config;
})
axios({
url: "",
method: "",
data: 默认支持字符串，如果要使用对象，则需要自己添加拦截器
}).then(res => {}, err => {
})
网友评论