如果样式要求不多的话这样写没问题,如下代码是截取我输入的姓的前三个字母
- <div id="root">
- 姓:<input type="text" v-moudel="firstName">
- 名:<input type="text" v-moudel="lastName">
- 姓名:<span>{{firstName.slice(0,3)}}-{{lastName}}</span>
- </div>
- <script type="text/javascript">
-
- const vm=new Vue({
- el:'#root',
- data:{
- firstName:'hb',
- lastName:'bj'
- }
- })
注意:之前的showInfo是绑定事件,加不加()都行,现在是调用那个函数必须得加()
每次改动firstName后者lastName就会重新解析模版,调用fullName
- <div id="root">
- 姓:<input type="text" v-model="firstName">
- 名:<input type="text" v-model="lastName">
- 姓名:<span>{{fullName()}}</span>
- </div>
- <script type="text/javascript">
-
- const vm=new Vue({
- el:'#root',
- data:{
- firstName:'hb',
- lastName:'bj'
- },
- methods:{
- fullName(){
- // this是vue实例,里面就有firstName啥的
- return this.firstName+'-'+this.lastName
- }
- }
- })
定义:要用的属性不存在,要通过Vue中已有属性计算得来。
原理:底层借助了Objcet.defineproperty方法提供的getter和setter
属性:vue认为data里面写的就是属性,属性:属性值,属性在vm._data里
计算属性:就是拿着你已经写完的属性去加工计算,放在vm里,不在data里
属性放在data里,计算属性放在computed
- <div id="root">
- 姓:<input type="text" v-model="firstName">
- 名:<input type="text" v-model="lastName">
- 姓名:<span>{{fullName}}</span>
- 姓名:<span>{{fullName}}</span>
- 姓名:<span>{{fullName}}</span>
- </div>
- <script type="text/javascript">
-
- const vm=new Vue({
- el:'#root',
- data:{
- firstName:'hb',
- lastName:'bj'
- },
- computed:{
- fullName: {
- get(){
- //读取fullName的时候自动调用get
- // 并且vue给你设置computed里的this是vm
- console.log('get被调用喽')
- return this.firstName+'-'+this.lastName
- }
-
- }
- }
-
- })
如果这个时候我多次调用fullName的话,输出get被调用喽只显示一次,因为有缓存
get什么时候调用?(1)初次读取fullName 时,(2)所依赖的数据发生变化时,所以不用担心姓或者名变化fullName没变
我用computed不是fullName对象.get函数!而是我用fullName的时候立马就调用get函数,返回一个值放在fullName(计算出来的新属性)身上,在vm中可以查看
set什么时候调用?fullName被修改的时候,而且必须设置参数,你把fullName改成什么就返回什么
- set(value){
- const arr=value.split('-')
- this.firstName=arr[0]
- this.lastName=arr[1]
- //fullName依赖first和last,想真正的改掉就得把谁算出来的改掉
-
- }
优势:与methods实现相比,内部有缓存机制(复用),效率更高,调试方便。
备注:
1.计算属性最终会出现在vm上,直接读取使用即可,不用加括号,和methods区别一下子。
2.如果计算属性要被修改,那必须写set函数去响应修改,且set中要引起计算时依赖的数据发生改变
,这很关键。
计算属性一般不修改,确定只读不改就可以用简写
姓名:<span>{{fullName}}span>
- computed:{
- fullName(){
- return this.firstName+'-'+this.lastName
- }
- }
fullName是一个属性,不是一个方法,只不过是调用里面的getter,把返回值直接给了vm,所以直接{{fullName}}不可以加()!!
data的数据,methods的方法,computed的计算属性
- <div id="root">
- <h2>今天天气很{{isHot?'炎热':'凉爽'}}</h2>
- <button>切换天气</button>
- </div>
- <script type="text/javascript">
-
- const vm=new Vue({
- el:'#root',
- data:{
- isHot:true
- }
- })
- <div id="root">
- <h2>今天天气很{{info}}</h2>
- <button @click="change">切换天气</button>
- </div>
- <script type="text/javascript">
-
- const vm=new Vue({
- el:'#root',
- data:{
- isHot:true
- },
- computed:{
- info(){
- return this.isHot?'炎热':'凉爽'
- // isHot不是computed里的找不到,所以得this,就是vue的
- }
- },
- methods:{
- change(){
- this.isHot=!this.isHot;
- }
- }
-
- })
不需要methods也可以这样写:
<button @click="isHot=!isHot">切换天气</button>
@xxx:yyy绑定事件的时候可以写一些简单的语句
- watch:{
- isHot:{
- immediate:true,
- //初始化时让handler调用
- //当isHot发生改变时它就调用
- handler(newValue,oldValue){
- console.log('isHot改了',newValue,oldValue)
- }
- }
- }
用handler的时候同时返回两个参数newValue和oldValue
- const vm=new Vue({
- el:'#root',
- data:{
- isHot:true
- },
- computed:{
- info(){
- return this.isHot?'炎热':'凉爽'
- // isHot不是computed里的找不到,所以得this,就是vue的
- }
- },
- })
- vm.$watch('isHot',{
- immediate:true,
- //初始化时让handler调用
- //当isHot发生改变时它就调用
- handler(newValue,oldValue){
- console.log('isHot改了',newValue,oldValue)
- }
- })
第一个参数是对象名,第二个参数是配置对象
(1).Vue中的watch默认不监测对象内部值的改变(一层,如果监视那么对象地址不变就不变)。
(2).配置deep:true可以监测对象内部值改变(多层)。
(3).Vue自身可以监测对象内部值的改变,但Vue提供的watch默认不可以!想要可以就要手动开启deep:true
(4).使用watch时根据数据的具体结构,决定是否采用深度监视。
- <div id="root">
- <h3>a的值是:{{numbers.a}}</h3>
- <button @click="numbers.a++">点我实现a+1</button>
- <h3>b的值是:{{numbers.b}}</h3>
- <button @click="numbers.b++">点我实现b+1</button>
- </div>
- <script type="text/javascript">
-
- new Vue({
- el:'#root',
- data:{
- isHot:true,
- numbers:{
- a:1,
- b:1
- }
- },
- watch:{
- //监视多级结构中某个属性的变化
- numbers:{
- //不加引号报错是因为本来就应该加引号写,有的中间不带.的简写了没加
-
- // 如果想要给b也加的话,一个一个写太麻烦了,但是发现直接给number加
- // 改变a或者bnumber都不输出,因为它没有深入的去看a或b的变化
-
- deep:true,//监视多级结构中所有属性的变化
- handler(){
- console.log('number改了')
- }
- }
-
- }
-
- })
-
- </script>
用简写的前提是不需要immediate也不需要deep
- watch:{
- isHot(newValue,oldValue){
- console.log('isHot被改了')
- }
- }
- vm.$watch('isHot',function(newValue,oldValue)
- {
- console.log('isHot被改了')
- })
- <div id="root">
- 姓:<input type="text" v-model="firstName">
- 名: <input type="text" v-model="lastName">
- 全名: <span>{{fullName}}</span>
- </div>
- <script type="text/javascript">
-
- new Vue({
- el:'#root',
- data:{
- firstName:'张',
- lastName:'三',
- fullName:'张-三'
- },
- watch:{
- firstName(newValue){
- this.fullName=newValue+'-'+this.lastName
- },
- lastName(newValue){
- this.fullName=this.firstName+'-'+newValue
- }
-
- }
-
-
- })
监视姓的同时还是监视名
- computed:{
- fullName: {
- get(){
- console.log('get被调用喽')
- return this.firstName+'-'+this.lastName
- }
-
- }
- }
加一下就完事了,但是computed计算属性里面不能开启异步任务去维护数据的,靠的就是返回值,watch就可以开延迟什么的。
- firstName(newValue){
- setTimeout(()=>{
- this.fullName=newValue+'-'+this.lastName
- },1000)
1、computed能完成的功能,watch都可以完成。
2、watch能完成的功能,computed不一定能完成,例如:watch可以进行异步操作。
两个重要的小原则!
1、所被Vue管理的函数,最好写成普通函数,这样this的指向才是vm 或 组件实例对象。
2、所有不被Vue所管理的函数(定时器的回调函数、ajax的回调函数等、Promise的回调函数),最好写成箭头函数,这样this的指向才是vm 或 组件实例对象