vue的底层原理

深入式响应

深入响应式原理：

1. 当视图模型（VM）中的数据模型（M）发生改变时， 视图（V）就会进行更新

2. Vue通过watcher将data中的属性全部使用Object.definePropery编程getter和setter,当属性值发生

改变的时候， 就会触发， 然后wather就会触发， 告诉视图（V）进行重新渲染

3. **** 数据必须放在data选项中才能进行深入响应式

底层原理：

核心使用的是es5的一个方法,这个方法不支持ie8以及以下

Object.defineProperty(obj,obj.attr,descriptor)

参数：

obj

要在其上定义属性的对象。

prop

要定义或修改的属性的名称。

descriptor

将被定义或修改的属性描述符。它是一个对象， 这个对象有哪些构成？

configurable： 决定了对象的key是否可删除

enumerable： 决定了对象是否可遍历（枚举）

writeable: 决定了对象的key的value是否可修改

存储器：

get函数 ----起了个名字getter 设置当前对象的key的初始值

set函数 ----起了个名字setter 修改当前对象的key的值

 {{msg}} 
 {{num}} 

点击


`

watch-监听

watch

1. 作用：
   用来监听数据的变换， 当数据模型 （data选项 M）发生改变时， watch就会触发
2. 使用
   两种用法：
3. key的value值是一个函数 普通玩家

new Vue({
watch: {
key(value,oldvalue){}
}
})

2. key的value值是一个对象 主播/职业玩家

new Vue({
watch: {
key： {
deep: true/false 深入监听,
handler(value,oldvalue){} // 监听的处理函数
}
}
})

watch中的key指的就是data选项中key

eg: 深入监听

{{ msg }}



************************************************************

axios

get请求

1. axios get写法一

axios.get('http://localhost/get.php',{
method: 'get',
params: {
a: 1,
b: 2
}
})
.then( res => {
console.log( res )
})
.catch( error => {
if( error ){
throw error
}
})

2 axios get写法二

axios({
url: 'http://localhost/get.php', //php路径
method: 'get',
params: {   /
a: 1,           //给文件里的属性赋值
b: 2           //
}
})
.then( res => {
console.log( res )
})
.catch( error => {
if( error ){
throw error
}
})

axios post 写法一

axiosPostHandler(){

axios({
url: 'http://localhost/post.php',
method: 'post',
data: params,
headers: {          //可以省略
'Content-Type': "application/x-www-form-urlencoded"
}
})
.then(res => {
console.log( res )
})
.catch( error => {
if( error ){
throw error
}
})
}