Vue基础3

最新推荐文章于 2024-05-21 20:04:34 发布

weixin_45773069

最新推荐文章于 2024-05-21 20:04:34 发布

阅读量240

点赞数

分类专栏： vue2 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_45773069/article/details/126845048

版权

vue2 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

vue监视属性的原理

收集表单

内置指令

vue监视属性的原理

更新时的一个问题

vue监视：1.watch(程序员的监视），2.修改data数据，模板里用到的地方自动发生改变；两个底层原理是一样的，后者是vue自动的监视

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="root"> 
    <h2>人员列表</h2>
    <button @click="updataMei">更新马冬梅</button>
    
        <ul>
            <li v-for="p in persons" :k="p.id">
                {{p.name}}-{{p.age}}-{{p.sex}}
            </li>
        </ul>
    </div>

    <script type="text/javascript">
        new Vue({
            el: "#root",
            data: {
                persons: [
                    { id: "001", name: "马冬梅", age: 19, sex: "女" },
                    { id: "002", name: "周冬雨", age: 20, sex: "女" },
                    { id: "003", name: "周杰伦", age: 21, sex: "男" },
                    { id: "004", name: "温兆伦", age: 22, sex: "男" }
                ],
            },
            methods: {
                updataMei(){
                    // this.persons[0].name="马老师"//奏效
                    // this.persons[0].age=50//奏效
                    // this.persons[0].sex="男"//奏效
                 this.persons[0]={id:"001",name:"马老师",age:50,sex:"男"}//不奏效
                }
            }
        })
    </script>
</body>
</html>

单独赋值，开发者工具能检测到，并且页面显示如下图：

整体赋值，vue开发者工具检测不到，如下图：但其实他是改变了的，只不过vue没有检测得到，可以通过vm实例查看

但是奇怪的是，如果完成了改变再打开开发者工具，开发者工具是能展现的；如果开发者工具已经在工作了再去改变，vue开发者工具是不能检测到的

vue监测数据改变的原理

对象：

data里的数据变成vm里的：

data加工成_data实际上是添加了set，代表可以做响应式，引起模板的重新解析，然后数据代理成为vm里的

加工的时候，对象的对象....只要还是对象，很多层都会检测到，并且都设置set

data一变调用set，set一调重新解析模板，模板一解析生成新旧dom，新旧dom再对比，生成新的页面

Vue.set的使用：vm.$set也可以

如果在编写vue代码时，忘记写data里的某个属性，想要再去添加（不可以动data），可以借助Vue.set(在哪里添加，添加什么，添加的值)，但是第一个参数不能是vm或者data，。不能vm.student.sex='男'更不能直接vm.sex='男',因为vm里的属性都是数据代理得来的，而且这两种方法vue不会提供set,也就是说没有响应式。

数组：

数组里面没有get，set,所以修改数组是没有响应式的，对应更新时的那个问题

数组的改变，vue提供的是：用数组的一些方法对他进行改变，这个vue是可以检测到的

因为他做了两件事：1.数组函数本来的功能 2.重新解析模板

当然啦，也可以用vue.set或者vm.$set对数组进行改变

总结：

数据劫持：把data劫持过来变成_data

收集表单

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="root">
        <form action="">
         账号：<input type="text" v-model="account"><br>
         密码：<input type="password"  v-model="password"><br>
         性别：
         男<input type="radio" name="sex" v-model="sex" value="man">
         女<input type="radio" name="sex" v-model="sex" value="female"><br>
         爱好:
         学习<input type="checkbox" v-model="hobby" value="study">
         打游戏<input type="checkbox" v-model="hobby" value="game">
         吃饭<input type="checkbox" v-model="hobby" value="eat"><br>
         所属校区:
         <select v-model="city">
             <option value=""  >请选择校区</option>
             <option value="beijing"   >北京</option>
             <option value="shanghai"  >上海</option>
             <option value="wuhan"  >武汉</option>
         </select>
         <br>
         其他信息：
         <textarea v-model="other"></textarea><br>
         <input type="checkbox" v-model="agree">阅读并接受<a href="">《用户协议》</a>
         <button>提交</button>
        </form>
     </div>
</body> 
 <script type="text/javascript">
        new Vue({
            el:'#root',
            data:{
                account:'',
                password:'',
                sex:'',
                hobby:[],
                city:'',
                other:'',
                agree:''
            }
        })
    </script>
</html>