Ref
- ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的$refs 对象上
- 如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向computed组件
- ref 本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们 - 它们还不存在！$refs 也不是响应式的，因此你不应该试图用它在模板中做数据绑定
- 示例：
<body>
<div id="app">
<input ref="input"><br>
<button @click="focus()">点击获取焦点</button>
/*点击按钮时上面文本框获得焦点*/
</div>
<script src="../libs/vue.js"></script>
<script>
new Vue({
el:'#app',
methods:{
focus(){
this.$refs.input.focus()
}
}
})
</script>
计算属性
- 可以使用计算属性来代替在表达式中进行的复杂运算，以便于能够更方便的维护与复用逻辑
- 计算属性是在选项对象中使用 computed 字段来定义
- 计算属性是可被缓存的（计算属性是基于它的响应式依赖进行缓存的，只有当依赖项发生变化时，才会重新计算并缓存）
- 计算属性与方法的区别
- 计算属性有缓存，方法没有缓存，对于同一个事件，计算属性缓存后只调用一次，方法调用几次则执行几次
- 方法中可包含如网络请求类似的副作用操作，计算属性中没有
- 示例：
<div id="app">
<div>{
{total}}</div>
/*3*/
</div>
<script src="../libs/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
num1:1,
num2:2
},
computed:{
//total() {
// return this.num1+this.num2
//},
//注释内容未下面内容简写形式
total(){
get() {
// getter，用于获取属性值，比如：console.log(this.reversedMsg)
console.log('计算 total...')
return this.num1+this.num2
},
set(val) {
// setter，用于设置（修改）属性值
console.log('赋值:', val)
},
}
},
</script>
侦听属性
- 一种更通用的方式来观察和响应 Vue 实例上的数据变动
- 当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的
- 侦听属性是在选项对象中使用 watch 字段来定义
- 计算属性与侦听属性区别
- 缓存，计算属性缓存后只调用一次，侦听属性调用几次则执行几次
- 计算属性是由一个或多个依赖项计算返回一个值，而侦听器是侦听一个数据的变化引起其它操作或一到多个数据变化
- 示例：
<body>
<div id="app">
{
{message}}
</div>
<script src="../libs/vue.js"></script>
<script>
const vm=new Vue({
el:"#app",
data:{
message:{
name:"jack",age:20}
// message:"jack"
},
watch:{
// message(newval,oldval){
// console.log(newval,oldval)
// }
//注释内容为下面内容简写形式
message: {
handler(newval,oldval){
console.log(newval,oldval)
},
immediate:true,//立即执行
deep:true,//深度监听，message对象里的内容
}
}
})
</script>
方法，计算属性，侦听属性示例
<body>
<div id="app">
<div>{
{reseverFun()}}</div>
<div>{
{reseverFun()}}</div>
<div>{
{reseverComputed}}</div>
<div>{
{reseverComputed}}</div>
</div>
<script src="../libs/vue.js"></script>
<script>
const vm=new Vue({
el:"#app",
data:{
message:"hello world",
},
methods:{
reseverFun(){
console.log("方法改变")
return this.message.split('').reverse().join('')
}
},
computed:{
reseverComputed(){
console.log("计算改变")
return this.message.split('').reverse().join('')
}
},
watch:{
message(newVal,oldval){
console.log(newVal,oldval)
}
},
})
</script>
</body>
/*
控制台输出说明方法执行几次则调用几次，而计算由于缓存原因只执行一次，当内容发生改变时，侦听事件启动
方法改变
方法改变
计算改变
vm.message='hello vue'
hello vue hello world
方法改变
方法改变
计算改变
'hello vue'
*/
数组变更
变更方法
push() / pop()
unshift() / shift()
splice()
sort() / reverse()
vue 对这七个方法进行了重写，当调用这些方法进行数组修改时，会触发响应式渲染
替换数组
- 当调用非变更方法时，不会触发响应式渲染，则可以使用替换数组的方式来进行数组更新
- 当数组长度改为0时，不会触发响应式渲染
组件化应用构建
- 组件，即构建应用程序所使用到的部件
- 组件系统，允许我们使用小型、独立和通常可复用的组件构建大型应用
- 在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例
定义组件选项
const options = {
template: '模板-视图的结构(布局)',
data() {
return {
}
},
}
注意：
- template 中定义的结构，必须使用单个根元素包裹
- data 必须是函数结构，在函数体内部返回一个普通对象
为什么 data 要是函数？
-
组件是可被复用的，当创建同一个组件的不同实例时，如果 data 是普通对象，则不同的实例引用到的是同一个 data 对象，当任意一个实例中对 data 数据进行更新时，其它实例都会受影响，通常这与实际业务不符
-
定义成函数，则创建各组件实例时，会调用 data 函数生成组件实例自身私有用到的对象数据，各组件实例间数据是独立的，互不受影响
注册组件
- 全局注册
Vue.component(name, options)
全局注册的组件可在任意组件中使用到
- 局部注册
const options = {
components: {
name: componentOptions
}
}
局部注册的组件仅在其父组件内部可使用
- 渲染组件
- 利用组件名称作为自定义标签名称使用，来渲染组件。
- 在使用自定义组件名作为标签名称使用时，要完整书写独立的结束标签，标签名称应该使用短横线命名的规范