0831-vue

计算属性和侦听器

计算属性

计算属性是基于它们的响应式依赖进行缓存的，计算属性比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化。并且当数据源不发生改变时调用的数据是从缓存中获取的

定义通过关键词computed属性对象中定义一个个函数，并返回一个值，使用计算属性时和data中的数据使用方式一样

new Vuee({
conputed:{
	sum(){
	return n1+n2
}
}
})

调用时，直接写名称就可以，不用写小括号

<div>{{sum}}</div>

注:

• 此方法中不能写异步
• 计算属性具有缓存的功能，如果你的依赖项，没有发生改变，则他会在再一次调用时，会读取缓存中的数据
• 在计算属性中，调用了n1和n2，则n1和n2就是他的依赖项，如果这两个依赖项，有一个发生改变，他就会重新计算，如果两个都没有发生改变，则第二之后调用，读取缓存中的数据

如果你定义的计算属性，为简写方式，给计算属性赋值，会报错，上面写的就是简写，只有标准的写法时，他才可以对于计算属性进行赋值操作，赋值操作会触发标准方式中的set方法，然后你可以使用set方法，完成一些其他的事情，简写中只实现了get方法所有在赋值时，会报错

标准写法
computed:{
total:{
get(){
	return this.n1+this.n2
}
set(newValue){
console.log(newValue)
}
}
}
}

监听器

监听器是用来监听data配置中数据的变化，一旦有变化，就会 自动触发，默认情况下，初始化不处触发

• 在监听器中可以得到this对象的
• 监听器它的依赖项，只有一个 只能是一对一
• 监听器中可以下写异步
  监听器的标准写法

标准写法
watch:{
//方法名或属性名 就是你要观察的data中的属性名称
username:{
 变化后的值，变化前的值
 handler(newValue,oldValue){
 console.log(newValue,oldValue)
 }
}
初始时，执行一次  一般情况下不启用，只有在标准写法下面，才有此配置，简写是没有的
immediate:true
深度监听,可以监听到对象里面属性的变化
deep:true
}

在没有imediatte和deep的情况下可以简写

简写
username(newValue,oldValue){
console.log(newValue,oldValue)
}

在使用deep时一般适用于监听对象，监听对象的变化，它前后值是一样的，无法区分前后值，但是可以侦听到属性的变化，在属性多的情况下适用标准方法来写

在一个属性的情况下可以适用简写

user:{id:100,name:'江森'}
在监听对象中的指定的属性数据的变化，推荐
简写
"user.id"(newvalue,oldvalue){
console.log(newvalue,oldvalue)
}

过滤器

在数据被渲染之前，可以对其进行进一步处理，比如将字符截取或者将小写统一转换为大写等等，过滤器本身就是一个方法。

过滤器在vue3中废弃了
过滤器分为全局过滤器和局部过滤器
作用：过滤器的作用就是为了对于界面中显示的数据进行处理和操作

定义全局过滤器

回调函数中的第一个参数 永久是绑定的数据

语法：
Vue.filter("过滤器名",(value,[…args])=>{})
应用：
	Vue.filter("phoneCrypt",value=>{
		return value.slice(0,3)+'****'+value.slice(7)
	}

定义局部过滤器

局部过滤器定义在Vue对象的配置中的filters配置选项中，参数1永久是绑定的数据

语法：
new Vue({
	filters:{
		过滤器名(value){
	return 数据
}
	}
})
应用：
可以传递参数改变中间的值
 <h3>{{ phone | phoneCrypt('!!!!') }}</h3>

filters:{
        phoneCrypt(value, salt = '****'){
          return value.slice(0, 3) + salt + value.slice(7)
        }

混入

混入(mixins)是一种分发Vue组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。
混入分为：全局和局部

混入：用于公共代码复用

• 注: 混入的配置，它是可以把几乎所有new Vue配置中的所有配置都能混入，但是el配置它不可以混入
• data配置，在混入方式中，只能写函数的方式，且函数一定要返回一个对象，混入可能被调用多次，如果直接是对象的话，就会有污染
• data混入的优先级: 组件 > 局部 > 全局 => 只会调用一个
• 生命周期的方法：执行顺序 全局 -> 局部 --> 组件 依次执行

全局定义混入

Vue.mixin({
	created()
	methods:{
	}
})

局部定义混入

let minxinObj = {}

new Vue({
	mixins:[mixinobj]
})

补充知识点:

  	混入可以解决js的单继承问题，php和pthyon都有混入
  	vue2还能用一下混入，在vue3中有混入但是不推荐，在vue3中有新的东西可以解决单继承

继承：子类可以使用父类的所有功能，并且对这些功能进行扩展。继承的过程，就是从一般到特殊的过程。
js就是单继承

在js中面向对象编程时，可以用#定义一个私有变量#y此时y就是一个私有变量
arguments是一个伪数组，三个点函数时数组 (…args)

插件

在vue中提供插件机制，可以通过它的要求来完成插件的封装，运用到项目中

插件的使用

Vue.use(函数|对象|类，[可选参数])

插件的封装

函数封装

function plugin(Vue类，options可选参数){
}

类封装

类中必须有静态方法 并且静态方法的名称必须为 install

class Plugin{
	static  install(Vue 类,options可选参数）{

}
}

对象封装

const Plugin = {
install(){

}
}

插件封装的例子这个是类的其他的都是类似的

<div id="app">
    <h3 v-red>{{title}}</h3>
  </div>

  <!-- 第3步：实例化vue -->
  <script>
    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 vm = new Vue({
      el: '#app',
      data: {
      },
      created() {
        // Vue.run()
        this.run()
      }
    })

生命周期

这个地方也需要补充

vue3中有13个钩子函数

初始化生命周期，只在初始化时执行一次

• beforeCreate()
• created()
• beforeMount()
• mounted()
  更新阶段生命周期 ,会执行n次,更新阶段的时候我们可以监听数据的变化
• beforeUpdate()
• Updated()
  销毁阶段，只会执行一次，可以将数据在销毁阶段释放掉，比如说setInterval
• beforedestroy()
• destroyed()

beforeCreate 在实例初始化之后，数据观测和事件配置之前被调用 此时data 和 methods 以及页面的DOM结构都没有初始化 什么都做不了 执行1次
created 在实例创建完成后被立即调用此时data 和 methods已经可以使用 但是页面还没有渲染出来 执行1次 用this对象
beforeMount 在挂载开始之前被调用 此时页面上还看不到真实数据 只是一个模板页面而已 执行1次
mounted el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子。 数据已经真实渲染到页面上 在这个钩子函数里面可以进行数据请求等 执行1次
beforeUpdate 数据更新时调用，页面上数据还是旧的 n次
updated 由于数据更新完毕，页面上数据已经替换成最新的 n次
beforeDestroy 实例销毁之前调用 执行1次
destroyed 实例销毁后调用 执行1次
activated keep-alive 组件激活时调用
deactivated keep-alive 组件停用时调用
errorCaptured 当捕获一个来自子孙组件的错误时被调用

网络请求 axios

这个地方有待跟进周六日

组件

组件 (Component) 是 Vue.js 最强大的功能之一，它是html、css、js等的一个聚合体。
组件化

1. 将一个具备完成功能的项目的一部分分隔多处使用
2. 加快项目的进度
3. 可以进行项目复用
   分为全局组件和局部组件

全局组件

这里也需要更新

定义全局组件，一但生命完成，就可以在所有的组件中直接使用，无需引入和注册
定义的组件，他的元素必须要有一个顶层元素进行包裹，否则会报错

Vue.component("mytitle",{
data(){
		return{
		title:'我是一个标题'
		}
	}
}