Vue-跨域、计算属性、监听属性

跨域

同源策略：同源策略会引起跨域问题，是浏览器中的安全协议，主机、协议、端口只要有一个不一致，就会引起同源策略，从而引起跨域问题

解决办法：1.放开后台（不安全）2.利用script标签中的src属性不受同源策略影响的特点，这种方式叫做JSONP（也需要跟后台配合）3.配置代理（在本地起一个服务，再去向后端服务器发送请求，服务器和服务器之间没有同源策略问题）

在vue.config.js中配置代理

/abc :配置代理名字 让/abc代理目标路径 

target:代理路径

changeOrigin：是否跨域

pathRewrite：路径重写 把/abc设置成空

！！！改完vue.config.js后别忘记重启

计算属性-computed

什么是计算属性：

计算属性是Vue中的一种特殊属性，用于对已有的数据进行计算和衍生，以生成新的数据。计算属性的值是根据依赖的数据动态计算得出的，当依赖的数据发生变化时，计算属性会自动重新计算。

计算属性的作用

缓存结果：计算属性的值会被缓存起来，只有在依赖的数据发生变化时才会重新计算。这样可以避免不必要的重复计算，提高性能。

响应式更新：计算属性会自动追踪依赖的数据，当依赖的数据发生变化时，计算属性会自动重新计算，保持数据的实时性。

简化模板逻辑：通过使用计算属性，可以将复杂的逻辑处理和转换操作放在计算属性中，简化模板中的代码，使模板更加清晰和易读

计算属性如何使用：

在computed（计算属性）中定义属性（computed与data同级），计算属性中的属性不能和data中的属性重复。

fullName就是return后边的东西 发生变化就会走计算属性

写成函数形式 相当于只有一个get方法

也可以定义成对象的格式

对象里有两个方法 get和set 

get后边跟return；set里有val

get就是拿到这个值 fullName的值；set就是设置 手动修改fullName

 监听属性-watch

什么是监听属性：

监听属性是Vue中的一种特殊属性，用于监测数据的变化并触发相应的回调函数。通过监听属性，我们可以在数据发生改变时执行一些额外的逻辑操作。

监听属性的作用：

监听属性的作用是在数据发生变化时，执行一些副作用操作或触发其他的逻辑。它可以用于响应数据的变化并进行相应的处理，比如数据的验证、异步操作、触发其他组件的更新等。

监听属性如何使用：

在watch对象中，可以定义多个属性的监听器，每个属性对应一个回调函数。当被监听的属性发生变化时，Vue会自动调用对应的回调函数，并传递新值和旧值作为参数。

watch里边的属性名可以与data中的属性名重复

监听对象可以写成函数的形式 里面有newVal和oldVal

newVal是最新的值；oldVal是上一次的值

也可以写成对象的格式

immdeiate：true 立即监听 上来就直接监听 

deep：true 深度监听 如果不写深度监听就只监听到obj 不会监听到obj里的属性

如果要监听一个对象，记得给它加上深度监听 deep:true

监听属性和计算属性的区别

computed属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用,使用的时候不加（）；

methods方法表示一个具体的操作，主要书写业务逻辑；

watch一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；可以看作是computed和methods的结合体

总结来说，计算属性用于对已有的数据进行处理和转换，生成新的数据；而监听属性用于监测数据的变化并执行相应的副作用操作。它们在Vue开发中都有各自的应用场景，根据实际需求选择使用。