vue2的方法

不可以使用箭头函数

<template>
<div><div>{{sum2()}}</div><button @click="add">add</button>
</div></template><script>
export default {data(){return{name:"张三",num:20,num2:30,}},methods:{sum2(){console.log('sum2')return this.num+ this.num2},/*** 注意，不应该使用箭头函数来定义 method 函数 (例如 plus: () => this.a++)。* 理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.a 将是 undefined。* 这时this其实是methods的this，但是methods没别任何对象调用所以他的this是undefined* 函数的this指向调用他的对象*/add:()=>{// this.num++// console.log(this.num)console.log(this)}},computed:{sum(){console.log('sum')return this.num+ this.num2}},watch:{num(){console.log('num')return this.num+ this.num2}},beforeCreate(){console.log('beforeCreate')}
}
</script><style lang="scss" scoped></style>

add:()=>{// this.num++// console.log(this.num)console.log(this)}

使用箭头函数时报错，打印一下发现箭头函数功能直接指向父级元素（这里是）methods，所以这里的this是methods的this因为未被调用所以是空的

注意，不应该使用箭头函数来定义 method 函数 (例如 plus: () => this.a++)。
* 理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.a 将是 undefined。
* 这时this其实是methods的this，但是methods没别任何对象调用所以他的this是undefined
* 函数的this指向调用他的对象

vue2监听

新建文件

修改路由

来到watch->index.vue

<template><div><h1>监听</h1><p>{{ num }}</p><button @click="num++">+</button><button @click="dog.name = '小柏'">+</button></div>
</template><script>
export default {data() {return {num: 1,dog: {name: '小狗',age: 1}}},watch: {/*** 1.简写,监听属性不依赖其他属性，修改值就会触发，一旦触发了被监听属性的set就会触发*/num(newV, oldV) {console.log('新值', newV, '旧值', oldV)},// dog(newV, oldV) {//     console.log('新值', newV, '旧值', oldV)// }dog: {deep: true,// 深度监听，监听对象中的属性变化handler(newV, oldV) {console.log('新值', newV, '旧值', oldV)},immediate: true//立即开始监听，页面第一次渲染时或者刷新时就会触发},'dog.age': {//这样直接监听对象的属性handler(newV, oldV) {console.log('新值', newV, '旧值', oldV)},immediate: true}}
}
</script>
<style scoped lang='scss'></style>

 num(newV, oldV) {console.log('新值', newV, '旧值', oldV)},

监听对象和对象属性

监听对象俩个方法选择其一，才会触发

immediate: true//立即开始监听，页面第一次渲染时或者刷新时就会触发
deep: true,// 深度监听，监听对象中的属性变化

   dog: {deep: true,// 深度监听，监听对象中的属性变化handler(newV, oldV) {console.log('新值', newV, '旧值', oldV)},immediate: true//立即开始监听，页面第一次渲染时或者刷新时就会触发},'dog.age': {//这样直接监听对象的属性handler(newV, oldV) {console.log('新值', newV, '旧值', oldV)},immediate: true}

vue2父传子

// 父传子搭配生命周期的理解

新建文件

切换路由

生命周期父子组件运行与销毁

parent.vue

引用使用子的文件

import Child from "./child";

//定义自己的名字是parent，引用子组件儿子的名字
name: 'parent',
components: { Child },
//在div内使用它
<Child/>

定义生命周期并对起销毁，给一个show属性，为true控制开关

return {show: true}beforeCreate() {console.log('父组件', 'beforeCreate')},created() {console.log('父组件', 'created')},beforeMount() {console.log('父组件', 'beforeMount')},mounted() {console.log('父组件', 'mounted')},beforeUpdate() {console.log('父组件', 'beforeUpdate')},updated() {console.log('父组件', 'updated')},beforeDestroy() {console.log('父组件', 'beforeDestroy')},destroyed() {console.log('父组件', 'destroyed')},

把父里面的值传个子，并使用按钮控制开关

 <Child v-if="show"/><button @click="show = !show">按钮</button>

parent.vue全部代码

<template><div><Child v-if="show"/><button @click="show = !show">按钮</button></div>
</template><script>
/*** 父传子，通过自定义属性传参，即props* 父组件将要传递的参数通过v-bind绑定到自组件上* :属性名="参数值"*/
import Child from "./child";
export default {name: 'parent',components: { Child },data() {return {show: true}},/*** 当父子组件嵌套时* 会先将父组件初始化，但不会进行挂载* 然后开始进行子组件的初始化以及挂载* 子组件挂载完毕时，才会挂载父组件* 销毁的时候，先销毁子组件，然后才会触发父组件的updated钩子*/beforeCreate() {console.log('父组件', 'beforeCreate')},created() {console.log('父组件', 'created')},beforeMount() {console.log('父组件', 'beforeMount')},mounted() {console.log('父组件', 'mounted')},beforeUpdate() {console.log('父组件', 'beforeUpdate')},updated() {console.log('父组件', 'updated')},beforeDestroy() {console.log('父组件', 'beforeDestroy')},destroyed() {console.log('父组件', 'destroyed')},methods: {},computed: {}
}
</script>
<style scoped lang='scss'></style>

子和父运行生命周期，并对起销毁

child.vue

定义一下自己的名字

 name: 'child',

在子组件里用生命周期，看看执行顺序

<template><div>子组件</div>
</template><script>
/*** 自组件通过props接受父组件传递的值* props中的属性被混入了当前的子组件中* 可以通过this直接访问到* 注意：子组件不允许修改父组件传递的值，否则会破坏vue的单向数据流*/
export default {name: 'child',data() {return {}},beforeCreate() {console.log('子组件beforeCreate')},created() {console.log('子组件created')},beforeMount() {console.log('子组件beforeMount')},mounted() {console.log('子组件mounted')},beforeUpdate() {console.log('子组件beforeUpdate')},updated() {console.log('子组件updated')},beforeDestroy() {console.log('子组件beforeDestroy')},destroyed() {console.log('子组件destroyed')},}
</script>
<style scoped lang='scss'></style>

show 初始值为 true，<Child> 组件在初始渲染时会被显示出来。

当点击show将flase隐藏，对子组件进行销毁

• 当父子组件嵌套时

• • 会先将父组件初始化，但不会进行挂载
  • 然后开始进行子组件的初始化以及挂载
  • 子组件挂载完毕时，才会挂载父组件
  • 销毁的时候，先销毁子组件，然后才会触发父组件的updated钩子

注意：子组件不允许修改父组件传递的值，否则会破坏vue的单向数据流

<template><div>子组件<p>{{ age }}</p></div>
</template><script>
/*** 子组件通过props接受父组件传递的值* props中的属性被混入了当前的子组件中* 可以通过this直接访问到* 注意：子组件不允许修改父组件传递的值，否则会破坏vue的单向数据流*/
export default {/*** 1.简写* props: ['age'],*//*** 2.完整写法*/props: {age: {type: Number,//类型default: 18,//默认值required: true,//是否必须validator: (v) => { return true }//校验规则}},name: 'child',data() {return {}},beforeCreate() {console.log('子组件beforeCreate')},created() {console.log('子组件created')},beforeMount() {console.log('子组件beforeMount')},mounted() {console.log('子组件mounted')/*** $parent* 1.获取父组件的实例* 2.通过$parent可以访问到父组件的实例，从而访问到父组件中的数据和方法*/setTimeout(() => {console.log(this.$parent, '父组件')}, 100);},beforeUpdate() {console.log('子组件beforeUpdate')},updated() {console.log('子组件updated')},beforeDestroy() {console.log('子组件beforeDestroy')},destroyed() {console.log('子组件destroyed')},
}
</script>
<style scoped lang='scss'></style>