VUE计算属性/监听属性

计算属性

关键词 computed: 在该属性中的函数 才是计算属性函数
 # 必须是写在computed: 属性中的函数 才是计算属性函数
  <input type="text" v-model="name"> ----{{newText}}
  # 调用计算属性函数 不需要加括号，默认当属性一样直接用
  

优点：普通函数只要页面发送变化就会重新执行，浪费效率
     计算函数只有在与他相关的数据发送变化时才会执行
  
重点：必须是写在vue对象computed:属性中的函数，此函数必须要有返回值，
     调用时直接使用不要加括号

new Vue({
        el: '#app',
        data: {
            name: '11'
        },
        computed: {
          # 添加计算属性函数
            newText() {
                return this.name.slice(0, 1).toUpperCase() + this.name.slice(1)
            }
        }
    })

通过计算属性实现过滤

  <input type="text" v-model="name"> 
    <ul>
        <li v-for=" item in newList">{{item}}</li>
        # 直接对于计算属性newList进行循环取值
    </ul>
    
  
 # 根据用户输入内容来过滤列表

data: {
     name:'',
     dataList: ['a', 'acs', 'abc', 'asdxc', 'bb', 'vasdwss']
        },
computed:{
     newList(){
     return this.dataList.filter(item => item.indexOf(this.name) >=0)}
     # 过滤dataList列表，箭头函数 item代表dataList中的每一个值，每一个值和''做过滤，都符号，所以开始会显示所有列表内容
     # 当用户输入后 过滤条件改变 dataList列表中每个数据和用户已输入内容比较，保留符号的返回，
     # 由于newList发生改变，那for循环也会刷新，实现了时时过滤

监听属性

在data中定义了一些变量，监听这些变量只要变量发生变化就会执行对应函数

关键词：watch:

# 语法：watch:{ 需要监听的变量名(){变量值发送改变后执行的函数}  }

<script>
    new Vue({
        el:'#app',
        data:{
            type:'1',
        },
        methods:{
          get_data(){
              console.log('发送请求拿数据')
          }},
        watch:{
         # 添加一个监听属性
            type(){
         # 添加需要监听的属性，data中的type，{如果该属性有变化会执行对应的函数}
                console.log('我执行了')
                console.log(this.type)
                this.get_data()
            }}})
</script>


<div id="app">
    <span @click="type=1">python</span> | <span @click="type=2">golang</span>
    # 绑定单机事件，更改属性的值，由于该属性被监听，当值被更改后会执行对应函数
</div>