vue ajax不更新,vue 视图不更新 什么是Ajax？我们怎样使用Ajax？

vue数组属性发生改变时，视图不更新如何解决

data中数据，都是响应式。也就是说，如果操作data中的数据，视图会实时更新；

​ 但在实际开发中，若data中数据类型较为复杂，方法methods中改变对象的属性，视图也就是页面并不会改变

​ 原因是vue监听不到数据类型特别复杂的属性。

​ 原因：因为 vue 的检查机制在进行视图更新时无法监测 数组中的某个对象的属性值的变化。

1，使用this.s

e

t

(

t

h

i

s

.

o

b

j

,

k

e

y

,

v

a

l

)

来

解

决

对

象

操

作

：

​

三

个

参

数

：

t

h

i

s

.

set(this.obj,key,val) 来解决 对象操作： ​ 三个参数：this.set(this.obj,key,val)来解决对象操作：​三个参数：this.set(“改变的对象”，“改变的对象属性”，“值”)

数组操作：

​ 三个参数：this.$set(“数组”，“下标”，“值”)

添加属性

{{ student.name }}

export default {

data() {

return {

student: {

name: '张三',

}

}

},

methods: {

setMessage() {

this.$set(this.student, 'age', 15)

console.log(this.student)

}

}

}

2，利用 Object.assign({}，this.obj)创建新对象

export default {

data() {

return {

student: {

name: '张三',

}

}

},

methods: {

setMessage() {

this.student.age = 15

this.student = Object.assign({}, this.student)

console.log(this.student)

}

}

}

3，使用vue.set()

​ 可以使用Vue.set()方法将响应式属性添加到嵌套的对象上

// Vue.set(object, key, value)

// object 要更改的数据源(可以是对象或者数组)

// key 要更改的具体数据

// value ：重新赋的值

export default() {

data() {

food: {

name: 'apple'

}

}

}

Vue.set(food, 'count', 1);

vue3.0与vue2.0的区别

1，性能提升

​ 更小巧，更快速；支持摇树优化；支持 Fragments 和跨组件渲染；支持自定义渲染器。

2，API 变动

​ 除渲染函数 API 和 scoped-slot 语法之外，其余均保持不变或者将通过另外构建一个兼容包

​ 除了 scoped slot 语法有一些微调之外变动最大的部分将是渲染函数(render) 中的虚拟 DOM 的格式

3，重写虚拟 DOM (Virtual DOM Rewrite)

​ 随着虚拟 DOM 重写，减少 运行时(runtime)开销。重写将包括更有效的代码来创建虚拟节点

4，更精准的变更通知

​ 在2.x 版本中，使用 Vue.set 来给对象新增一个属性时，这个对象的所有 watcher 都会重新运行

​ 3.x 版本中，只有依赖那个属性的 watcher 才会重新运行

5，默认进行懒观察(lazy observation)

​ 2.x 版本，不管数据多大，都会在一开始就为其创建观察者。当数据很大时，

​ 这可能会在页面载入时造成明显的性能压力。

前后端数据交互之Ajax原理及使用方法

即前端跟后端之间到底是怎么进行数据交互的?那么针对这个问题，我们来讨论一下以下两种方法：

1、form表单

2、ajax

首先，最原始的，通过form表单以post/get方式提交数据。

当你点击submit按钮时，浏览器会默认把你在input里面输入的数据，以post或get的方式提交到form表单中的action这个地址。相当于你提交表单时，就会向服务器发送一个请求，然后服务器会接受并处理提交过来的form表单，最后返回一个新的网页。你可以结合以下代码来理解这段话。

为了解决上述问题，2005年出现了Ajax。

一、什么是Ajax

1、Ajax的全称是Asynchronous JavaScript and XML，即异步JavaScript+XML。

2、它是一种技术方案，但并不是一种新技术。

3、它依赖的是现有的CSS/HTML/Javascript，而其中最核心的依赖是浏览器提供的XMLHttpRequest对象。这个对象为向服务器发送请求和解析服务器响应提供了流畅的接口，使得浏览器可以发出HTTP请求与接收HTTP响应，实现在页面不刷新的情况下和服务端进行数据交互。

【补充】Ajax和XMLHttpRequest 两者的关系：我们使用XMLHttpRequest对象来发送一个Ajax请求。

二、怎么实现在页面不刷新的情况下和服务端进行数据交互?

1、XMLHttpRequest对象

2、fecth(不讨论)

XMLHttpRequest对象

为了便于我们理解怎么使用XMLHttpRequest对象实现在页面不刷新的情况下和服务端进行数据交互，我们先来看下下面的代码。

var xhr = new XMLHttpRequest() //创建一个对象

xhr.open('GET','/helloAjax.json',false) //设置ajax，.open()方法里面的三个参数分别是：要发送的请求类型、请求的url、表示是否异步发送请求的布尔值

xhr.send() //发出请求

var data = xhr.responseText //当请求到来时，读取请求中的数据

console.log(data) //输出

这样就是一个使用XMLHttpRequest对象发送的Ajax请求了，现在我们来分析分析这段代码。

首先，XMLHttpRequest构造函数通过new的方式构造一个XHR对象，并将这个对象赋值给xhr(可取任意名字)

然后，调用XMLHttpRequest对象的方法open与send。

调用send方法之后请求被发往服务器，由于这次请求是同步的，JS代码会在xhr.send()这个步骤暂停掉，一直等到服务器根据请求生成响应(Response)，传回给XHR对象，再继续执行。

最后，在收到响应后相应数据会填充到XHR对象的属性。有四个相关属性会被填充：

1、responseText——从服务器进程作为响应主体被返回的文本。

2、responseXML——从服务器进程返回的DOM兼容的文档数据对象。

3、status——响应的HTTP状态。即从服务器返回的数字代码，如404(未找到)和200(已就绪)。

4、statusText——HTTP状态的说明。伴随状态码的字符串信息。

但多数情况下，我们还是要发送异步请求，才能让JavaScript继续执行而不必等待响应。为了更好的理解ajax发送异步请求，我们来看以下代码

var xhr = new XMLHttpRequest()

//请求响应过程的当前活动阶段

xhr.onreadystatechange = function(){

console.log('readyState:',xhr.readyState)

}

xhr.open('GET','hello.json',true)

xhr.send()

//监听请求状态

xhr.onload = function(){ //onload相当于readyState=4

console.log(xhr.status)

if((xhr.status >= 200 && xhr.status <= 300) || xhr.status === 304){

console.log(xhr.responseText)

}else{

console.log(error)

}

}

请求/POST请求

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。

然而，在以下情况中，请使用 POST 请求：

1、无法使用缓存文件(更新服务器上的文件或数据库)

2、向服务器发送大量数据(POST 没有数据量限制)

3、发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

GET请求/POST请求使用方法

GET请求/POST请求使用方法

一个简单的 GET 请求

xhr.open('GET','lazyLoad.html',true)

xhr.send()

如果希望通过 GET 方法发送信息，可以向 URL 末尾添加字符串参数

xhr.open('GET','/login?username=Iris&password=12345',true)

xhr.send()

一个简单的 POST 请求

xhr.open('POST','/login',true)

xhr.send('username=Iris&password=12345')

如果向send()里面传递一个对象，可以用函数将该对象拼接成字符串形式

xhr.open('POST','/login',true)

xhr.send(makeUrl({ //step3、这个时候send()里面就不用发字符串了，直接发传递的对象就好了

username:'Iris',

address:'ChangSha',

age:21

}))

//step2、用户传递的是一个对象时 (实参是用户传递的这个对象)

makeUrl({

username:'Iris',

address:'ChangSha',

age:21

})

//step1、将拼接的过程写成一个函数，向函数makeUrl()里面传递一个形参

function makeUrl(obj){

var arr = [] //遍历这个对象

for(var key in obj){

arr.push(key + '=' + obj[key])

}

return arr.join('&')

}