Vue基础系列（四四）计算属性-监听器-过滤器-混入-插件-网络请求-全局组件
Posted 勇敢*牛牛
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue基础系列（四四）计算属性-监听器-过滤器-混入-插件-网络请求-全局组件相关的知识，希望对你有一定的参考价值。
🌕写在前面
🍊博客主页 ：勇敢link牛牛
🎉欢迎关注：🔎点赞👍收藏⭐️留言📝
🌟本文由 勇敢link牛牛 原创，CSDN首发！
📆首发时间：🌹2022年8月31日🌹
🆕最新更新时间：🎄2022年8月31日🎄
✉️愿你熬过万丈孤独，藏下星辰大海！
📠参考书籍：📚《Vue2》
🙏作者水平很有限，如果发现错误，请留言轰炸哦！万分感谢感谢感谢！
计算属性-监听器-过滤器-混入-插件-网络请求-全局组件
🍗计算属性
- vue使用，不推荐在模板中来写过多的逻辑
- 如果对于一个结果，进行计算，可以使用vue提供计算属性来完成，而且计算属性它还具有缓存功能。（只要不发生变化，他就不会再次执行）
- 如果你的依赖项，没有发生改变，则它会在再一次调用时，会读取缓存中的数据
- 只有标准的写法时，它才可以对于计算属性进行赋值操作
- 计算[属性]，也就是说，可以直接
this.属性赋值，取值 - 赋值只会触发标准方式中的set方法，然后你可以得到它，完成一些别的工作
- get操作必须要有返回值。
简写：
简写只是实现的了get
computed:
total()
console.log('computed -- total')
// 在计算属性中，调用了 n1和n2，则n1和n2就是它的依赖项，如果这两个依赖项，有一个发生改变，则它会重新计算，如果两个都没有发生改变，则第2之后调用，读取缓存中的数据
return this.n1 + this.n2
标准：
computed:
total:
get()
return this.n1 + this.n2
,
set(newVal)
if (newVal > 10)
this.msg = '值有点的大'
//this.total = 101，触发计算属性
🍚监听器
监听器，它用来监听data配置中的数据的变化，一但有变化，就会自动触发，默认情况，初始化不触发
在监听器中是可以得到this对象的
监听器它的依赖项，只有一个，一对一
监听器中可以写异步
在这里插入代码片
watch:
immediate: true // 初始时，执行1次 --- 一般情况下，不启用 只有在标准写法下面，才有此配置
deep: true,// 深度监听
username: 方法名或属性名 就是你要观察的data中的属性名称
handler(newValue, oldValue) // 变化后的值，变化前的值
console.log(newValue, oldValue);
if (newValue.length >= 3) this.errorUsername = '账号过长'
else this.errorUsername = ''
或者：
监听对象：监听对象变化，它的前后值是一样的，无法区分
'user.id'(newValue, oldValue)
console.log(newValue, oldValue);
🦪过滤器
过滤器的作用就是为了对于界面中显示的数据进行处理操作
全局过滤器
- 参数1：过滤器的名称，可以随意起名
- 参数2：回调函数，回调函数中的参数最后要有一个，最1位参数，永远指向为要过滤的数据
Vue.filter('phoneCrypt', value =>
return value.slice(0, 3) + '~~~~' + value.slice(7)
)
Vue.filter('phoneCrypt', (value, salt = '****') =>
return value.slice(0, 3) + salt + value.slice(7)
)
局部过滤器
<h3> phone | phoneCrypt('!!!!') </h3>
filters:
phoneCrypt(value, salt = '****')
return value.slice(0, 3) + salt + value.slice(7)
,
混入
用于公共代码复用
-
混入的配置，它是可以把几乎所有new Vue配置中的所有配置都能混入，但是el配置它不可以混入
-
data配置，在混入方式中，只能写函数的方式，且函数一定要返回一个对象，混入可能被调用多次，如果直接是对象的话，就会有污染
-
data混入的优先级 组件 > 局部 > 全局 => 只会调用一个
-
混入的生命周期方法，执行顺序 全局 -> 局部 --> 组件 依次执行
全局混入：
Vue.mixin(
data()
return
name: '张三 -- 全局'
,
computed:
showName()
return 'abc -- 全局'
,
methods:
run()
return 'run -- 全局'
,
created()
console.log('created -- 全局');
)
局部混入
对象语法：
需要在组件里面配置项： mixins: [mix]
const mix =
data()
return
name: '张三 -- 局部'
,
computed:
showName()
return 'abc -- 局部'
,
methods:
run()
return 'run -- 局部'
,
created()
console.log('created -- 局部');
const vm = new Vue(
el: '#app',
data:
// name: '张三 -- 实例'
,
mixins: [mix],//混入体
methods:
run()
return 'run -- 实例'
,
created()
console.log('created -- 实例');
)
给Vue原型上添加方法混入到methods：
添加成员属性
<body>
<div id="app">
<h3>name</h3>
<hr>
<h3>showName</h3>
<hr>
<div>run() --- show() </div>
</div>
<script>
// A模块
const http = () => console.log('http');
// Vue.prototype.$http = http
const mix =
data()
return
name: '张三 -- 局部'
,
computed:
showName()
return 'abc -- 局部'
,
methods:
run()
return 'run -- 局部'
,
created()
this.$http = http
this.title = '我是一个局部标题'
console.log('created -- 局部');
const vm = new Vue(
el: '#app',
data: ,
mixins: [mix],
methods:
show()
this.$http()
return this.title
)
</script>
</body>
🍜插件
函数模块
它是就一个可以利用的Vue模块写法就是function
然后是否启用这个模块，并且可以传参；
函数式语法：
模块里面可以针对这个vue所有语法配置项的书写
function plugin(Vue, options) /*插件模块*/
console.log(options, ">>>>>>>>.");
Vue.directive('red', el =>
el.style.cssText = 'color:red'
)
Vue.mixin(
data()
return
title: `() => console.log('run');`
,
created()
this.title = options.title
console.log('混入了');
)
// 静态属性
// Vue.run = () => console.log('run');
// 添加成员属性
Vue.prototype.run = () => console.log('run');
// 插入插件，传入参数
Vue.use(plugin,
title: 'abc'
)
const vm = new Vue(
el: '#app',
data: ,
created()
// Vue.run()
this.run()
)
类模块
class Plugin
// 它是就一个模块
static install(Vue, options)
console.log(options);
Vue.directive('red', el =>
el.style.cssText = 'color:red'
)
Vue.mixin(
data()
return
title: `() => console.log('run');`
,
created()
this.title = options.title
console.log('混入了');
)
// 添加成员属性
Vue.prototype.run = () => console.log('run');
// 插入插件
Vue.use(Plugin,
title: 'abc'
)
对象模块
const Plugin =
install(Vue, options)
console.log(options);
Vue.directive('red', el =>
el.style.cssText = 'color:red'
)
Vue.mixin(
data()
return
title: `() => console.log('run');`
,
created()
this.title = options.title
console.log('混入了');
)
// 添加成员属性
Vue.prototype.run = () => console.log('run');
// 插入插件
Vue.use(Plugin,
title: 'abc'
)
监听器：标准，简写：监听数据源的改变，深度监听
过滤器：局部，全局：界面的中的数据进行处理操作
混入：通过混入实现多继承，全局，局部
优先级 组件>局部>全局,只会调用一个
🍤生命周期：（暂8种）
🧈🍞🥪🍠🍠🥩🍗🍗🥖🍳🍳🌮🦪🦪🍜🍚🍚🥩🍠🦪🍘🍖🥖🌮🍜
const vm = new Vue(
el: '#app',
data:
username: ''
,
// 初始化阶段生命周期 -- 它只都只执行1次
beforeCreate()
console.log('beforeCreate');
,
created()
console.log('created');
,
beforeMount()
console.log('beforeMount');
,
mounted()
console.log('mounted');
setTimeout(() =>
// 销毁
this.$destroy()
, 2000);
this.timer = setInterval(() =>
console.log(111);
, 1000);
,
// 更新阶段生命周期，它们会执行N次
beforeUpdate()
console.log('beforeUpdate');
,
updated()
console.log('updated');
,
// 销毁阶段 只执行1次
beforeDestroy()
clearInterval(this.timer)
console.log('beforeDestroy');
,
destroyed()
console.log('destroyed');
)
🦪网络请求axios
主要是对axios库的使用
🍔axios全局配置
第一步引入：
<script src="./js/axios.js"></script>
//设置服务器已经端口号
axios.defaults.baseURL = 'http://localhost:9000';
// 设置超时时间 ms
axios.defaults.timeout = 10000;
//设置请求头（可选）
axios.defaults.headers.token = 'aaaaa'
// 请求拦截器 回调函数中的config对象一定要return出去
axios.interceptors.request.use(config =>
// console.log(config);
if (config.method === 'get')
config.headers.token = 'abc'
return config
)
// 响应拦截器
axios.interceptors.response.use(res =>
console.log(res);
if (res.data.code == 0) return res.data
alert('有错')
, err => Promise.reject(err))
钩子函数：挂载后执行
mounted()
axios.get('/api/users',
headers: /*设置请求头*/
token: 'abc'
).then(ret =>
console.log(ret.data);/*响应回来的数据*/
).catch(() => console.log('有异常'))
🥪请求方法
mounted()
/*get请求*/
axios.get('/api/users?id=1').then(ret =>
console.log(ret.data);
, () => console.log('有异常'));
/*post请求*/
axios.post('/api/users', name: '李四'/*第二个参数是上传数据的参数*/,
headers:
token: 'abc'
).then(ret =>
console.log(ret.data);/*响应回来的数据*/
)
/*put请求*/
axios.put('/api/users',
name: '李四 -- put'/*参数*/
,
headers:
token: 'abc'
).then(ret =>
console.log(ret.data);
)
/*delete请求*/
axios.delete('/api/users/100',null,
headers:
token: 'abc'
).then(ret =>
console.log(ret.d以上是关于Vue基础系列（四四）计算属性-监听器-过滤器-混入-插件-网络请求-全局组件的主要内容，如果未能解决你的问题，请参考以下文章
（Vue -03）Vue绑定样式 + 计算属性 + 侦听器+ 过滤器