import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
new Vue({
el: '#app',
template: `
<div>
<div>Name: {{firstName + ' ' + lastName}}</div>
<div>Name: {{getName()}}</div>
<div>Name: {{name}}</div>
<div>FullName: {{fullName}}</div>
<input type='text' v-model='obj.temp'>
</div>
`,
data:{
firstName: 'dzm',
lastName: 'xyq',
fullName: '',
obj: {
temp: '123'
}
},
computed: { // 在 computed 内部不要去做值的修改操作，不然可能会进入无线死循环
name () { // 只有在内部值发生变化的时候才会重新更新
return `${this.firstName} ${this.lastName}`
}
// name: {
// get () {
// return `${this.firstName} ${this.lastName}`
// },
// set (name) {
// const names = name.split(' ')
// this.firstName = names[0]
// this.lastName = names[1]
// }
// }
},
watch: { // 在 watch 内部不要去做值的修改操作，不然可能会进入无线死循环
// firstName (newName, oldName) { // 这么监听的话它只会在有变化的时候才会调用，如果需要直接默认就调用一次需要下面那种方法。
// this.fullName = newName + ' ' + this.lastName
// },
firstName: {
handler (newName, oldName) { // handler 方法别写错，写错不生效
this.fullName = newName + ' ' + this.lastName
},
immediate: true, // true 代表我们声明这个 firstName 之后需要立马执行一遍它，如果不设置 immediate 属性则需要下次变化的时候才会执行。
},
// obj: {
// handler (newName, oldName) { // handler 方法别写错，写错不生效
// console.log('obj.temp change');
// },
// immediate: true, // true 代表我们声明这个 obj 之后需要立马执行一遍它，如果不设置 immediate 属性则需要下次变化的时候才会执行。
// deep: true // 默认是 false, 默认 watch 监听只会监听当前属性的变化，如果这个属性是个对象，对象内部的值发生变化是不会被监听到的，如果想要监听到那么就可以设置 deep: true，但是加上 deep 之后，它会相当于把当前对象的所有属性遍历加上监听事件，而且是一层一层的遍历直到全部加上监听为止，这样的话就会相当消耗性能。
// },
'obj.temp': {
handler (newName, oldName) { // handler 方法别写错，写错不生效
console.log('obj.temp change');
},
immediate: true, // true 代表我们声明这个 obj.temp 之后需要立马执行一遍它，如果不设置 immediate 属性则需要下次变化的时候才会执行。
}
},
methods: {
getName () { // 每次都会调用
return `${this.firstName} ${this.lastName}`
}
}
})
