目录
计算属性: 计算属性 只有当所依赖的数据发生变化后才会重新计算 否则会缓存生成的属性值 无论多少次使用都只调用一次
总结：我会以 概念--写法有哪些--工作中使用场景来叙述，记住回答问题以第一人称！
我认为计算属性只有在依赖值发生改变的时候才会重新计算，否则会缓存生成，属性值不管多少次使用只会调用一次，计算属性的写法分为函数写法和对象写法，计算属性不能直接赋值，因为它里面默认没有set属性，函数写法，写一个函数，函数中return 操作逻辑，在<template>标签中以花括号形式将函数写上去，
对象写法：
第二种写法 对象写法 使用了这种方法我们需要手动给计算属性添加set方法 之后我们就可以直接给计算属性赋值
具体步骤：
1、先定义好数据
2、在get函数中将定义的数据return出去
3、在set函数中有一个形参 形参就是事件赋的值 可以将形参赋值给定义的数据
4、就可以直接赋值了
工作场景：例如：在页面使用vuex中的数据，如果在data中使用,修改了vuex的数据data不会改变重新渲染,建议在computed:{ }中使用,使用computed当依赖值发生改变就会重新渲染，修改vuex数据，页面也可以及时渲染了
结论是从一次次实验中得到，如有更新、或语法错误，跪求指错，我不怕错，非圣贤孰无过、就怕没人告诉你
-
计算属性函数写法
-
<template> <div class="home"> {{formateMsg}} {{formateMsg}} {{formateMsg}} {{formateMsg}} <button @click="changeMsg">点击修改msg</button> </div> </template> <script> export default { name: 'Home', data() { return { msg: 'hello' } }, computed: { formateMsg() { console.log(1); return this.msg.split('').reverse().join('') } }, // created() { // console.log(this); // } methods: { changeMsg() { this.formateMsg = 'dlrow' // 错误写法 因为计算属性不能直接赋值 因为计算属性默认并没有set属性 } } } </script> 对象写法
第二种写法 对象写法 使用了这种方法我们需要手动给计算属性添加set方法 之后我们就可以直接给计算属性赋值
具体步骤：
1、先定义好数据
2、在get函数中将定义的数据return出去
3、在set函数中有一个形参 形参就是事件赋的值 可以将形参赋值给定义的数据
4、就可以直接赋值了
-
<template> <div class="home"> 商品价格--- {{sumPrice}} <button @click="changePrice">修改商品价格</button> </div> </template> <script> export default { name: "Home", data() { return { // 1 定义数据 price: 123, num: 666, }; }, computed: { sumPrice: { // 2 在get中将数据return出去 get() { return this.price; }, //3 手动添加set方法 修改值 形参就是事件赋的值 set(val) { // console.log(val); val就是赋的值 this.price = val; }, }, }, methods: { // 4 点击按钮的事件 对象不能直接赋值,需要手动添加get/set方法 现在就可以直接赋值 changePrice() { //直接写死值 // this.sumPrice = 1234; // 动态变量值 this.sumPrice = this.num; }, }, }; </script>计算属性完
- ----------------------------------------------------------------------------------------------------------------------
过滤器开始
注意：过滤器 filter 过滤器在vue3中被移除了 功能需要使用计算属性代替
全局过滤器
全局过滤商品价格：
在main.js中写 所有价格保留小数两位 在需要的地方写 {{ 需要过滤的数据 | 全局过滤器名字}}
-
Vue.filter('formatePrice', (val) => { //console.log(val) // 过滤的数据 return val.toFixed(2) })在页面使用： // formatePrice 是main.js定义的过滤器名
{{item.price | formatePrice}}效果：所有价格保留小数两位
全局过滤时间：
Vue.filter('formatePrice', (val) => { //console.log(val) // 过滤的数据 // return val.toFixed(2) const dt = new Date(val) const y = dt.getFullYear() const m = (dt.getMonth() + 1 + '').padStart(2, '0') const d = (dt.getDate() + '').padStart(2, '0') const hh = (dt.getHours() + '').padStart(2, '0') const mm = (dt.getMinutes() + '').padStart(2, '0') const ss = (dt.getSeconds() + '').padStart(2, '0') // yyyy-mm-dd hh:mm:ss return `${y}-${m}-${d} ${hh}:${mm}:${ss}` })使用： {{要过滤的数据 | 过滤器名字}}
格式：
局部过滤器
- 局部过滤器 过滤器可以串联使用 I 下一个过滤器名 | 下一个过滤器名
-
<template> <div class="home"> <ul> <li v-for="(item, index) in arr" :key="index"> //局部过滤器格式: {{要过滤的数据| 过滤器名字}} 订单日期:{{item.time | formateTime}} //函数格式:花括号里写函数 过滤的数据作为实参 订单日期:{{changeTime(item.time)}} </li> </ul> </div> </template> <script> export default { name: 'Home', data() { return { arr:[ { name:'羽绒服', price: 300, time: '2021-11-13 12:12:12' }, { name:'羽绒服', price: 300, time: '2021-11-13 12:12:12' }, { name:'羽绒服', price: 300, time: '2021-11-13 12:12:12' } ] } }, filters: { // 局部过滤器 formateTime(val) { // console.log(val); let date = new Date(val) let year = date.getFullYear() let month = date.getMonth() + 1 let day = date.getDate() return `${year}/${month}/${day}` } }, methods: {//函数格式 花括号里写函数 过滤的数据作为实参传过来 changeTime(time) { let date = new Date(time) let year = date.getFullYear() let month = date.getMonth() + 1 let day = date.getDate() return `${year}/${month}/${day}` } } } </script>效果: 2021/11/13
Vue2 watch监听
- Vue2 简写wacth 函数形式
watch: {
sum (newValue, oldValue) {
console.log("sum的数值的变换新值、老值", newValue, oldValue);
}
},
- 完整写法 键值对形式，键是要监听的值，值是对象，对象里面操作逻辑
watch: {
obj: {
handler (newvalue, oldvalue) {
console.log(newvalue, oldvalue)
},
immediate: true, //立即监听
deep: true // 深度监听
}
},
- 监听路由：
watch: {
$route: {
handler (newvalue, oldvalue) {
//如果url地址栏发生变化，该函数会执行
console.log(newvalue, oldvalue)
},
immediate: true, //立即监听
deep: true // 深度监听
}
},
获取url的参数
location.href
刷新页面
location.reload()
页面跳转
一般页面跳转记录 a => b，想从 b 退回 a
this.$router.go(-1)
如果页面跳转记录 a => b => c，想从 c 一步退回 a
this.$router.go(-2)
vue3 watch的使用
总结：vue3 wacth后是一个小括号，在小括号中操作，如果要监听ref单个的值，监听的值逗号箭头函数，箭头函数里面有两个形参，new，old，可以在对象中直接打印，
监听多个值，可以在监听值的地方使用数组，多个值以逗号分隔
监听ractive复杂对象类型 ：wacth小括号，监听的对象逗号箭头函数，箭头函数中有两个值，new，old，在箭头函数对象中可以直接打印，如果要开启深度监听，在箭头函数后面加逗号，逗号后面是对象，对象中开启deep：true
如果要监听对象某一个值，例如person，在wacth小括号里以箭头函数形式监听对象某一个值 例如 watch(() =>person.name, (newVal, oldVal)=> {
console.log(newVal, oldVal)
})如果监听person对象里的多个值：wacth小括号中以数组形式书写，在数组中用箭头函数 例如：watch([() =>person.name, ()=> person.age], (newVal, oldVal)=> {
console.log(newVal, oldVal)
})
vue3监听路由
// 1 onBeforeRouteUpdate路由守卫
import { useRouter,onBeforeRouteUpdate } from 'vue-router';
let router = useRouter()
onBeforeRouteUpdate((to) => {
console.log('onBeforeRouteUpdate',to.path);
});
// 2 watch监听
watch(() =>router.currentRoute.value.path,
(newValue,oldValue)=> {
console.log('watch',newValue);
},
{ immediate: true },
{deep:true}
)
监听ref数组简单类型
//监听ref单一值的变化
watch(监听的值, (newvAL, oLdVal) => {
console.log(newvAL, oLdVal)
})
// 监听ref多个值的变化 数组形式
watch([msg, sum], (newVal, oldVal) => {
console.log(newVal, oldVal)
})
监听ractive复杂对象类型
// 监听reactive中的整个person对象
watch(person, (newVal, oldVal)=> {
console.log(newVal, oldVal)
}, {deep: true})
// 监听reactive对象中某一个属性的变化
watch(() =>person.name, (newVal, oldVal)=> {
console.log(newVal, oldVal)
})//监听person对象里的某一个值，开启深度监听
watch([() => person.job], (newVal, oldVak) => {
console.log(newVal, oldVak)
}, {deep: true})
//监听person对象里的某两个值
watch([() =>person.name, ()=> person.age], (newVal, oldVal)=> {
console.log(newVal, oldVal)
})结语：
我是浪哥。
我热爱 vue.js , ElementUI , Element Plus 相关技术栈，我的目标是给大家分享最实用、最有用的知识点，希望大家都可以早早下班，并可以飞速完成工作，淡定摸鱼🐟。
你可以在csdn关注我：活在风浪里，也可以在快手里找到我：张坤【视频达人】。
希望大家在 2022 变得更强。
335
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
